diff --git a/SECURITY_VULNERABILITIES_ANALYSIS.md b/SECURITY_VULNERABILITIES_ANALYSIS.md
new file mode 100644
index 00000000..50e8546f
--- /dev/null
+++ b/SECURITY_VULNERABILITIES_ANALYSIS.md
@@ -0,0 +1,205 @@
+# Security Vulnerabilities Analysis
+
+## Overview
+This document traces the origin of all security vulnerabilities identified in the project's dependency tree.
+
+## Vulnerability Summary
+- **Total Vulnerabilities**: 14 (1 low, 13 high)
+- **Fixed**: 9 vulnerabilities (reduced from 23)
+- **Remaining**: 14 vulnerabilities
+
+---
+
+## 1. `ip` Package Vulnerability (High Severity)
+
+### Vulnerability Details
+- **CVE**: SSRF improper categorization in `isPublic` function
+- **Affected Version**: `ip@2.0.1`
+- **Risk**: Server-Side Request Forgery (SSRF) attacks possible
+
+### Dependency Chain
+```
+Root Project
+└── @meshsdk/react@1.9.0-beta.87
+    └── @fabianbormann/cardano-peer-connect@1.2.18
+        └── @fabianbormann/meerkat@1.0.18
+            └── webtorrent@2.8.5
+                ├── bittorrent-tracker@11.2.2
+                │   └── ip@2.0.1 ⚠️ VULNERABLE
+                └── load-ip-set@3.0.1
+                    └── ip-set@2.2.0
+                        └── ip@2.0.1 ⚠️ VULNERABLE
+```
+
+### Root Cause
+The `ip` package is pulled in by **WebTorrent**, which is used for peer-to-peer (P2P) connectivity in Cardano wallet connections. This is a transitive dependency from:
+- `@fabianbormann/cardano-peer-connect` → Used by MeshSDK for P2P wallet connections
+- `webtorrent` → BitTorrent protocol implementation for P2P networking
+- `bittorrent-tracker` → Tracker client that uses `ip` for IP address validation
+
+### Impact Assessment
+- **Usage**: Only used when P2P wallet connection features are active
+- **Risk Level**: Medium-Low (only affects P2P connectivity features)
+- **Attack Vector**: Requires attacker to control IP addresses in P2P network context
+
+### Mitigation Options
+1. **Wait for upstream fix**: Monitor `@fabianbormann/cardano-peer-connect` for updates
+2. **Use npm overrides**: Force a patched version of `ip` (risky, may break functionality)
+3. **Disable P2P features**: If not needed, consider removing MeshSDK P2P functionality
+4. **Contact maintainers**: Report to MeshSDK team about dependency updates
+
+---
+
+## 2. `brace-expansion` Vulnerability (ReDoS)
+
+### Vulnerability Details
+- **CVE**: Regular Expression Denial of Service (ReDoS)
+- **Affected Versions**: `1.0.0 - 1.1.11 || 2.0.0 - 2.0.1`
+- **Risk**: CPU exhaustion through malicious regex patterns
+
+### Dependency Chain
+```
+Root Project
+└── @meshsdk/core-cst@1.9.0-beta.87
+    └── @cardano-sdk/crypto@0.2.3
+        └── npm@9.9.4 ⚠️ BUNDLED DEPENDENCY
+            ├── minimatch@9.0.3
+            │   └── brace-expansion@2.0.1 ⚠️ VULNERABLE
+            └── node-gyp@9.4.1
+                ├── glob@7.2.3
+                │   └── minimatch@3.1.2
+                │       └── brace-expansion@1.1.11 ⚠️ VULNERABLE
+                └── cacache@16.1.3
+                    └── glob@8.1.0
+                        └── minimatch@5.1.6
+                            └── brace-expansion@2.0.1 ⚠️ VULNERABLE
+```
+
+### Root Cause
+**Critical Finding**: `@cardano-sdk/crypto@0.2.3` includes `npm@^9.3.0` as a **production dependency**. This is highly unusual and problematic because:
+
+1. **npm should not be a dependency**: npm is a package manager, not a library
+2. **Bundled vulnerabilities**: npm@9.9.4 bundles vulnerable versions of `brace-expansion` and `glob`
+3. **Cannot be fixed via project dependencies**: These are bundled inside npm itself
+
+### Why npm is a dependency
+The `@cardano-sdk/crypto` package likely uses npm for:
+- Build tooling or scripts
+- Package management utilities
+- Development tooling (incorrectly marked as production dependency)
+
+**This is a bug/misconfiguration in the Cardano SDK package.**
+
+### Impact Assessment
+- **Usage**: Likely only used during build/development, not runtime
+- **Risk Level**: Low-Medium (ReDoS requires specific attack patterns)
+- **Attack Vector**: Requires attacker to provide malicious input to brace expansion functions
+
+### Mitigation Options
+1. **Update npm globally**: `npm install -g npm@latest` (fixes bundled dependencies)
+2. **Report to Cardano SDK**: This is a packaging issue that should be fixed upstream
+3. **Use npm overrides**: Force newer versions (may break npm functionality)
+4. **Consider alternative**: Evaluate if `@cardano-sdk/crypto` is necessary or if there's an alternative
+
+---
+
+## 3. `glob` Vulnerability (High Severity)
+
+### Vulnerability Details
+- **CVE**: Command injection via `-c/--cmd` executes matches with `shell:true`
+- **Affected Versions**: `glob@10.2.0 - 10.4.5`
+- **Risk**: Command injection attacks
+
+### Dependency Chain
+```
+Root Project
+└── @meshsdk/core-cst@1.9.0-beta.87
+    └── @cardano-sdk/crypto@0.2.3
+        └── npm@9.9.4 ⚠️ BUNDLED DEPENDENCY
+            ├── glob@10.3.10 ⚠️ VULNERABLE
+            └── node-gyp@9.4.1
+                └── (uses older glob versions)
+```
+
+### Root Cause
+Same as `brace-expansion` - bundled in npm@9.9.4 which is incorrectly included as a dependency of `@cardano-sdk/crypto`.
+
+### Impact Assessment
+- **Usage**: Only if npm CLI features are used at runtime (unlikely)
+- **Risk Level**: Low (requires CLI usage with malicious input)
+- **Attack Vector**: Command injection through glob CLI usage
+
+### Mitigation Options
+Same as `brace-expansion` - update npm globally or report to Cardano SDK maintainers.
+
+---
+
+## 4. Previously Fixed Vulnerabilities
+
+### ✅ `axios` (Fixed)
+- **Was**: Vulnerable versions in `@cardano-sdk/util-dev`
+- **Fixed**: Updated MeshSDK packages to `1.9.0-beta.87`
+- **Status**: Resolved
+
+### ✅ `tar-fs` (Fixed)
+- **Was**: Vulnerable versions in `dockerode`
+- **Fixed**: Updated MeshSDK packages
+- **Status**: Resolved
+
+---
+
+## Recommendations
+
+### Immediate Actions
+1. ✅ **Update MeshSDK packages** - Already completed (all at `1.9.0-beta.87`)
+2. ⚠️ **Update npm globally**: `npm install -g npm@latest`
+3. 📝 **Report to Cardano SDK**: File issue about npm being a production dependency
+
+### Long-term Actions
+1. **Monitor dependencies**: Set up automated dependency scanning
+2. **Evaluate alternatives**: Consider if Cardano SDK crypto package is necessary
+3. **Review P2P features**: Assess if `cardano-peer-connect` is required for your use case
+4. **Use npm overrides**: If needed, add overrides for critical vulnerabilities (with caution)
+
+### npm Overrides Example (Use with Caution)
+```json
+{
+  "overrides": {
+    "ip": "^2.0.2",
+    "brace-expansion": "^2.0.2",
+    "glob": "^10.4.6"
+  }
+}
+```
+
+---
+
+## Dependency Tree Visualization
+
+### Critical Paths
+```
+Root → @meshsdk/react → @fabianbormann/cardano-peer-connect → webtorrent → ip ⚠️
+Root → @meshsdk/core-cst → @cardano-sdk/crypto → npm → brace-expansion/glob ⚠️
+```
+
+### Key Packages
+- **@meshsdk/react**: Main MeshSDK React integration
+- **@fabianbormann/cardano-peer-connect**: P2P wallet connectivity
+- **@cardano-sdk/crypto**: Cryptographic utilities (incorrectly includes npm)
+- **webtorrent**: BitTorrent protocol for P2P
+- **npm**: Package manager (should not be a dependency!)
+
+---
+
+## Conclusion
+
+The security vulnerabilities stem from:
+1. **Transitive dependencies** in MeshSDK's P2P connectivity features (`ip` vulnerability)
+2. **Packaging error** in Cardano SDK (`npm` as production dependency causing `brace-expansion`/`glob` issues)
+
+Most vulnerabilities are low-risk for production use, but should be addressed through:
+- Updating npm globally
+- Reporting issues to upstream maintainers
+- Monitoring for package updates
+
+
diff --git a/next.config.js b/next.config.js
index 33101631..9ddc371b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,11 +12,6 @@ const config = {
     defaultLocale: "en",
   },
   transpilePackages: ["geist"],
-  eslint: {
-    // Warning: This allows production builds to successfully complete even if
-    // your project has ESLint errors.
-    ignoreDuringBuilds: true,
-  },
   typescript: {
     // Warning: This allows production builds to successfully complete even if
     // your project has type errors.
@@ -36,8 +31,18 @@ const config = {
         protocol: "https",
         hostname: "ipfs.io",
       },
+      {
+        protocol: "https",
+        hostname: "gateway.pinata.cloud",
+      },
     ],
   },
+  // Turbopack configuration (Next.js 16+)
+  // Empty config silences the warning about webpack/turbopack conflict
+  // WebAssembly support is enabled by default in Turbopack
+  turbopack: {},
+  
+  // Webpack config for builds that explicitly use webpack (e.g., with --webpack flag)
   webpack: function (config, options) {
     config.experiments = {
       asyncWebAssembly: true,
diff --git a/package-lock.json b/package-lock.json
index b2d518d5..8032921e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,6 @@
         "@trpc/next": "^11.0.0-rc.446",
         "@trpc/react-query": "^11.0.0-rc.446",
         "@trpc/server": "^11.0.0-rc.446",
-        "@vercel/blob": "^0.23.4",
         "busboy": "^1.6.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -55,7 +54,7 @@
         "jsonld": "^8.3.3",
         "jsonwebtoken": "^9.0.2",
         "lucide-react": "^0.439.0",
-        "next": "^15.2.4",
+        "next": "^16.0.8",
         "next-auth": "^4.24.7",
         "papaparse": "^5.5.3",
         "react": "^18.3.1",
@@ -96,7 +95,7 @@
         "@typescript-eslint/eslint-plugin": "^8.1.0",
         "@typescript-eslint/parser": "^8.1.0",
         "eslint": "^9.39.1",
-        "eslint-config-next": "^15.5.7",
+        "eslint-config-next": "^16.0.8",
         "jest": "^30.1.3",
         "postcss": "^8.4.39",
         "prettier": "^3.3.2",
@@ -3312,15 +3311,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
-      "integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.8.tgz",
+      "integrity": "sha512-xP4WrQZuj9MdmLJy3eWFHepo+R3vznsMSS8Dy3wdA7FKpjCiesQ6DxZvdGziQisj0tEtCgBKJzjcAc4yZOgLEQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.7.tgz",
-      "integrity": "sha512-DtRU2N7BkGr8r+pExfuWHwMEPX5SD57FeA6pxdgCHODo+b/UgIgjE+rgWKtJAbEbGhVZ2jtHn4g3wNhWFoNBQQ==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.8.tgz",
+      "integrity": "sha512-1miV0qXDcLUaOdHridVPCh4i39ElRIAraseVIbb3BEqyZ5ol9sPyjTP/GNTPV5rBxqxjF6/vv5zQTVbhiNaLqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3328,9 +3327,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
-      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.8.tgz",
+      "integrity": "sha512-yjVMvTQN21ZHOclQnhSFbjBTEizle+1uo4NV6L4rtS9WO3nfjaeJYw+H91G+nEf3Ef43TaEZvY5mPWfB/De7tA==",
       "cpu": [
         "arm64"
       ],
@@ -3344,9 +3343,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
-      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.8.tgz",
+      "integrity": "sha512-+zu2N3QQ0ZOb6RyqQKfcu/pn0UPGmg+mUDqpAAEviAcEVEYgDckemOpiMRsBP3IsEKpcoKuNzekDcPczEeEIzA==",
       "cpu": [
         "x64"
       ],
@@ -3360,9 +3359,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
-      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.8.tgz",
+      "integrity": "sha512-LConttk+BeD0e6RG0jGEP9GfvdaBVMYsLJ5aDDweKiJVVCu6sGvo+Ohz9nQhvj7EQDVVRJMCGhl19DmJwGr6bQ==",
       "cpu": [
         "arm64"
       ],
@@ -3376,9 +3375,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
-      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.8.tgz",
+      "integrity": "sha512-JaXFAlqn8fJV+GhhA9lpg6da/NCN/v9ub98n3HoayoUSPOVdoxEEt86iT58jXqQCs/R3dv5ZnxGkW8aF4obMrQ==",
       "cpu": [
         "arm64"
       ],
@@ -3392,9 +3391,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
-      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.8.tgz",
+      "integrity": "sha512-O7M9it6HyNhsJp3HNAsJoHk5BUsfj7hRshfptpGcVsPZ1u0KQ/oVy8oxF7tlwxA5tR43VUP0yRmAGm1us514ng==",
       "cpu": [
         "x64"
       ],
@@ -3408,9 +3407,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
-      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.8.tgz",
+      "integrity": "sha512-8+KClEC/GLI2dLYcrWwHu5JyC5cZYCFnccVIvmxpo6K+XQt4qzqM5L4coofNDZYkct/VCCyJWGbZZDsg6w6LFA==",
       "cpu": [
         "x64"
       ],
@@ -3424,9 +3423,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
-      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.8.tgz",
+      "integrity": "sha512-rpQ/PgTEgH68SiXmhu/cJ2hk9aZ6YgFvspzQWe2I9HufY6g7V02DXRr/xrVqOaKm2lenBFPNQ+KAaeveywqV+A==",
       "cpu": [
         "arm64"
       ],
@@ -3440,9 +3439,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
-      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.8.tgz",
+      "integrity": "sha512-jWpWjWcMQu2iZz4pEK2IktcfR+OA9+cCG8zenyLpcW8rN4rzjfOzH4yj/b1FiEAZHKS+5Vq8+bZyHi+2yqHbFA==",
       "cpu": [
         "x64"
       ],
@@ -5152,13 +5151,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@rushstack/eslint-patch": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.15.0.tgz",
-      "integrity": "sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@rvagg/ripemd160": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/@rvagg/ripemd160/-/ripemd160-2.2.4.tgz",
@@ -6670,18 +6662,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.48.1.tgz",
-      "integrity": "sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.49.0.tgz",
+      "integrity": "sha512-JXij0vzIaTtCwu6SxTh8qBc66kmf1xs7pI4UOiMDFVct6q86G0Zs7KRcEoJgY3Cav3x5Tq0MF5jwgpgLqgKG3A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.48.1",
-        "@typescript-eslint/type-utils": "8.48.1",
-        "@typescript-eslint/utils": "8.48.1",
-        "@typescript-eslint/visitor-keys": "8.48.1",
-        "graphemer": "^1.4.0",
+        "@typescript-eslint/scope-manager": "8.49.0",
+        "@typescript-eslint/type-utils": "8.49.0",
+        "@typescript-eslint/utils": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.1.0"
@@ -6694,22 +6685,22 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.48.1",
+        "@typescript-eslint/parser": "^8.49.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.1.tgz",
-      "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.49.0.tgz",
+      "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.48.1",
-        "@typescript-eslint/types": "8.48.1",
-        "@typescript-eslint/typescript-estree": "8.48.1",
-        "@typescript-eslint/visitor-keys": "8.48.1",
+        "@typescript-eslint/scope-manager": "8.49.0",
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -6725,14 +6716,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.48.1.tgz",
-      "integrity": "sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.49.0.tgz",
+      "integrity": "sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.48.1",
-        "@typescript-eslint/types": "^8.48.1",
+        "@typescript-eslint/tsconfig-utils": "^8.49.0",
+        "@typescript-eslint/types": "^8.49.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -6747,14 +6738,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.48.1.tgz",
-      "integrity": "sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.49.0.tgz",
+      "integrity": "sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.48.1",
-        "@typescript-eslint/visitor-keys": "8.48.1"
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6765,9 +6756,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.48.1.tgz",
-      "integrity": "sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.49.0.tgz",
+      "integrity": "sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6782,15 +6773,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.48.1.tgz",
-      "integrity": "sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.49.0.tgz",
+      "integrity": "sha512-KTExJfQ+svY8I10P4HdxKzWsvtVnsuCifU5MvXrRwoP2KOlNZ9ADNEWWsQTJgMxLzS5VLQKDjkCT/YzgsnqmZg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.48.1",
-        "@typescript-eslint/typescript-estree": "8.48.1",
-        "@typescript-eslint/utils": "8.48.1",
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0",
+        "@typescript-eslint/utils": "8.49.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -6807,9 +6798,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.48.1.tgz",
-      "integrity": "sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.49.0.tgz",
+      "integrity": "sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6821,16 +6812,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.48.1.tgz",
-      "integrity": "sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.49.0.tgz",
+      "integrity": "sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.48.1",
-        "@typescript-eslint/tsconfig-utils": "8.48.1",
-        "@typescript-eslint/types": "8.48.1",
-        "@typescript-eslint/visitor-keys": "8.48.1",
+        "@typescript-eslint/project-service": "8.49.0",
+        "@typescript-eslint/tsconfig-utils": "8.49.0",
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/visitor-keys": "8.49.0",
         "debug": "^4.3.4",
         "minimatch": "^9.0.4",
         "semver": "^7.6.0",
@@ -6862,16 +6853,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.48.1.tgz",
-      "integrity": "sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.49.0.tgz",
+      "integrity": "sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.48.1",
-        "@typescript-eslint/types": "8.48.1",
-        "@typescript-eslint/typescript-estree": "8.48.1"
+        "@typescript-eslint/scope-manager": "8.49.0",
+        "@typescript-eslint/types": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6886,13 +6877,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.48.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.48.1.tgz",
-      "integrity": "sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==",
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.49.0.tgz",
+      "integrity": "sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/types": "8.49.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -7234,22 +7225,6 @@
         "node": ">=20.0.0"
       }
     },
-    "node_modules/@vercel/blob": {
-      "version": "0.23.4",
-      "resolved": "https://registry.npmjs.org/@vercel/blob/-/blob-0.23.4.tgz",
-      "integrity": "sha512-cOU2e01RWZXFyc/OVRq+zZg38m34bcxpQk5insKp3Td9akNWThrXiF2URFHpRlm4fbaQ/l7pPSOB5nkLq+t6pw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "async-retry": "^1.3.3",
-        "bytes": "^3.1.2",
-        "is-buffer": "^2.0.5",
-        "is-plain-object": "^5.0.0",
-        "undici": "^5.28.4"
-      },
-      "engines": {
-        "node": ">=16.14"
-      }
-    },
     "node_modules/@webgpu/types": {
       "version": "0.1.67",
       "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.67.tgz",
@@ -7670,15 +7645,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/async-retry": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
-      "integrity": "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==",
-      "license": "MIT",
-      "dependencies": {
-        "retry": "0.13.1"
-      }
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -8704,15 +8670,6 @@
         "node": ">=10.16.0"
       }
     },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/c12": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
@@ -10705,25 +10662,24 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.7.tgz",
-      "integrity": "sha512-nU/TRGHHeG81NeLW5DeQT5t6BDUqbpsNQTvef1ld/tqHT+/zTx60/TIhKnmPISTTe++DVo+DLxDmk4rnwHaZVw==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.0.8.tgz",
+      "integrity": "sha512-8J5cOAboXIV3f8OD6BOyj7Fik6n/as7J4MboiUSExWruf/lCu1OPR3ZVSdnta6WhzebrmAATEmNSBZsLWA6kbg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "15.5.7",
-        "@rushstack/eslint-patch": "^1.10.3",
-        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
-        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@next/eslint-plugin-next": "16.0.8",
         "eslint-import-resolver-node": "^0.3.6",
         "eslint-import-resolver-typescript": "^3.5.2",
-        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-jsx-a11y": "^6.10.0",
         "eslint-plugin-react": "^7.37.0",
-        "eslint-plugin-react-hooks": "^5.0.0"
+        "eslint-plugin-react-hooks": "^7.0.0",
+        "globals": "16.4.0",
+        "typescript-eslint": "^8.46.0"
       },
       "peerDependencies": {
-        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
+        "eslint": ">=9.0.0",
         "typescript": ">=3.3.1"
       },
       "peerDependenciesMeta": {
@@ -10732,6 +10688,19 @@
         }
       }
     },
+    "node_modules/eslint-config-next/node_modules/globals": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
+      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -10973,13 +10942,20 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
-      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "peerDependencies": {
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
@@ -12154,13 +12130,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/h3-js": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-4.3.0.tgz",
@@ -12417,6 +12386,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -12827,29 +12813,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-buffer": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/is-bun-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
@@ -13100,15 +13063,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-plain-object": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
@@ -15993,12 +15947,12 @@
       }
     },
     "node_modules/next": {
-      "version": "15.5.7",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
-      "integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
+      "version": "16.0.8",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.0.8.tgz",
+      "integrity": "sha512-LmcZzG04JuzNXi48s5P+TnJBsTGPJunViNKV/iE4uM6kstjTQsQhvsAv+xF6MJxU2Pr26tl15eVbp0jQnsv6/g==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.7",
+        "@next/env": "16.0.8",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -16008,18 +15962,18 @@
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+        "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.5.7",
-        "@next/swc-darwin-x64": "15.5.7",
-        "@next/swc-linux-arm64-gnu": "15.5.7",
-        "@next/swc-linux-arm64-musl": "15.5.7",
-        "@next/swc-linux-x64-gnu": "15.5.7",
-        "@next/swc-linux-x64-musl": "15.5.7",
-        "@next/swc-win32-arm64-msvc": "15.5.7",
-        "@next/swc-win32-x64-msvc": "15.5.7",
-        "sharp": "^0.34.3"
+        "@next/swc-darwin-arm64": "16.0.8",
+        "@next/swc-darwin-x64": "16.0.8",
+        "@next/swc-linux-arm64-gnu": "16.0.8",
+        "@next/swc-linux-arm64-musl": "16.0.8",
+        "@next/swc-linux-x64-gnu": "16.0.8",
+        "@next/swc-linux-x64-musl": "16.0.8",
+        "@next/swc-win32-arm64-msvc": "16.0.8",
+        "@next/swc-win32-x64-msvc": "16.0.8",
+        "sharp": "^0.34.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -21447,15 +21401,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/retry": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -22963,6 +22908,22 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/tailwindcss/node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/tar-fs": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
@@ -23836,6 +23797,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.49.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.49.0.tgz",
+      "integrity": "sha512-zRSVH1WXD0uXczCXw+nsdjGPUdx4dfrs5VQoHnUWmv1U3oNlAKv4FUNdLDhVUg+gYn+a5hUESqch//Rv5wVhrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.49.0",
+        "@typescript-eslint/parser": "8.49.0",
+        "@typescript-eslint/typescript-estree": "8.49.0",
+        "@typescript-eslint/utils": "8.49.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/uglify-js": {
       "version": "3.19.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
@@ -25092,6 +25077,19 @@
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
     "node_modules/zustand": {
       "version": "4.5.7",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
diff --git a/package.json b/package.json
index d202e63a..b87a4c10 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
     "@trpc/next": "^11.0.0-rc.446",
     "@trpc/react-query": "^11.0.0-rc.446",
     "@trpc/server": "^11.0.0-rc.446",
-    "@vercel/blob": "^0.23.4",
     "busboy": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -67,7 +66,7 @@
     "jsonld": "^8.3.3",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.439.0",
-    "next": "^15.2.4",
+    "next": "^16.0.8",
     "next-auth": "^4.24.7",
     "papaparse": "^5.5.3",
     "react": "^18.3.1",
@@ -108,7 +107,7 @@
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
     "eslint": "^9.39.1",
-    "eslint-config-next": "^15.5.7",
+    "eslint-config-next": "^16.0.8",
     "jest": "^30.1.3",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
diff --git a/prisma/migrations/20250101000000_add_crowdfund_gov_extension_table/migration.sql b/prisma/migrations/20250101000000_add_crowdfund_gov_extension_table/migration.sql
new file mode 100644
index 00000000..3dac921b
--- /dev/null
+++ b/prisma/migrations/20250101000000_add_crowdfund_gov_extension_table/migration.sql
@@ -0,0 +1,7 @@
+-- This migration was applied to the database but the migration file was not found locally.
+-- The migration failed and has been marked as rolled back.
+-- If you need to recreate this migration, please check the database schema or git history.
+
+-- No-op migration (failed and rolled back)
+SELECT 1;
+
diff --git a/prisma/migrations/20250806050340_add_crowdfund/migration.sql b/prisma/migrations/20250806050340_add_crowdfund/migration.sql
new file mode 100644
index 00000000..5da9a2c3
--- /dev/null
+++ b/prisma/migrations/20250806050340_add_crowdfund/migration.sql
@@ -0,0 +1,7 @@
+-- This migration was applied to the database but the migration file was not found locally.
+-- The migration has been marked as applied in the database.
+-- If you need to recreate this migration, please check the database schema or git history.
+
+-- No-op migration (already applied)
+SELECT 1;
+
diff --git a/prisma/migrations/20250825090537_add_param_utxo/migration.sql b/prisma/migrations/20250825090537_add_param_utxo/migration.sql
new file mode 100644
index 00000000..5da9a2c3
--- /dev/null
+++ b/prisma/migrations/20250825090537_add_param_utxo/migration.sql
@@ -0,0 +1,7 @@
+-- This migration was applied to the database but the migration file was not found locally.
+-- The migration has been marked as applied in the database.
+-- If you need to recreate this migration, please check the database schema or git history.
+
+-- No-op migration (already applied)
+SELECT 1;
+
diff --git a/prisma/migrations/20250828113754_add_date_crowdfund/migration.sql b/prisma/migrations/20250828113754_add_date_crowdfund/migration.sql
new file mode 100644
index 00000000..5da9a2c3
--- /dev/null
+++ b/prisma/migrations/20250828113754_add_date_crowdfund/migration.sql
@@ -0,0 +1,7 @@
+-- This migration was applied to the database but the migration file was not found locally.
+-- The migration has been marked as applied in the database.
+-- If you need to recreate this migration, please check the database schema or git history.
+
+-- No-op migration (already applied)
+SELECT 1;
+
diff --git a/prisma/migrations/20250909122657_add_gov_crowdfund/migration.sql b/prisma/migrations/20250909122657_add_gov_crowdfund/migration.sql
new file mode 100644
index 00000000..5da9a2c3
--- /dev/null
+++ b/prisma/migrations/20250909122657_add_gov_crowdfund/migration.sql
@@ -0,0 +1,7 @@
+-- This migration was applied to the database but the migration file was not found locally.
+-- The migration has been marked as applied in the database.
+-- If you need to recreate this migration, please check the database schema or git history.
+
+-- No-op migration (already applied)
+SELECT 1;
+
diff --git a/prisma/migrations/20251113150348_add_ipfs_hash_table/migration.sql b/prisma/migrations/20251113150348_add_ipfs_hash_table/migration.sql
new file mode 100644
index 00000000..5da9a2c3
--- /dev/null
+++ b/prisma/migrations/20251113150348_add_ipfs_hash_table/migration.sql
@@ -0,0 +1,7 @@
+-- This migration was applied to the database but the migration file was not found locally.
+-- The migration has been marked as applied in the database.
+-- If you need to recreate this migration, please check the database schema or git history.
+
+-- No-op migration (already applied)
+SELECT 1;
+
diff --git a/prisma/migrations/20251128091925_add_gov_action_anchor_field/migration.sql b/prisma/migrations/20251128091925_add_gov_action_anchor_field/migration.sql
new file mode 100644
index 00000000..91761288
--- /dev/null
+++ b/prisma/migrations/20251128091925_add_gov_action_anchor_field/migration.sql
@@ -0,0 +1,17 @@
+-- AlterTable
+-- Add anchorUrls column if it doesn't exist
+DO $$ 
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name='Ballot' AND column_name='anchorUrls') THEN
+        ALTER TABLE "Ballot" ADD COLUMN "anchorUrls" TEXT[];
+    END IF;
+END $$;
+
+-- Add anchorHashes column if it doesn't exist
+DO $$ 
+BEGIN
+    IF NOT EXISTS (SELECT 1 FROM information_schema.columns WHERE table_name='Ballot' AND column_name='anchorHashes') THEN
+        ALTER TABLE "Ballot" ADD COLUMN "anchorHashes" TEXT[];
+    END IF;
+END $$;
+
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 47e88233..268ef641 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -97,6 +97,8 @@ model Ballot {
   items            String[]
   itemDescriptions String[]
   choices          String[]
+  anchorUrls       String[] @default([])
+  anchorHashes     String[] @default([])
   type             Int
   createdAt        DateTime @default(now())
 }
diff --git a/src/components/common/ImgDragAndDrop.tsx b/src/components/common/ImgDragAndDrop.tsx
index 1e5b82ff..e93e722d 100644
--- a/src/components/common/ImgDragAndDrop.tsx
+++ b/src/components/common/ImgDragAndDrop.tsx
@@ -39,7 +39,7 @@ export default function ImgDragAndDrop({ onImageUpload }: ImgDragAndDropProps) {
 
   async function checkImageExists(shortHash: string): Promise<string | null> {
     try {
-      const response = await fetch(`/api/vercel-storage/image/exists?shortHash=${shortHash}`, {
+      const response = await fetch(`/api/pinata-storage/image/exists?shortHash=${shortHash}`, {
         method: "GET",
       });
       if (response.ok) {
@@ -81,7 +81,7 @@ export default function ImgDragAndDrop({ onImageUpload }: ImgDragAndDropProps) {
       formData.append("shortHash", shortHash);
       formData.append("filename", file.name);
 
-      const response = await fetch("/api/vercel-storage/image/put", {
+      const response = await fetch("/api/pinata-storage/image/put", {
         method: "POST",
         body: formData,
       });
diff --git a/src/components/common/overall-layout/layout.tsx b/src/components/common/overall-layout/layout.tsx
index 1b88e853..b85b2fd6 100644
--- a/src/components/common/overall-layout/layout.tsx
+++ b/src/components/common/overall-layout/layout.tsx
@@ -10,6 +10,7 @@ import { useUserStore } from "@/lib/zustand/user";
 import useAppWallet from "@/hooks/useAppWallet";
 import { useWalletContext, WalletState } from "@/hooks/useWalletContext";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
+import { AlertCircle, RefreshCw } from "lucide-react";
 
 import SessionProvider from "@/components/SessionProvider";
 import { getServerSession } from "next-auth";
@@ -29,6 +30,8 @@ import dynamic from "next/dynamic";
 import Loading from "@/components/common/overall-layout/loading";
 import { MobileNavigation } from "@/components/ui/mobile-navigation";
 import { MobileActionsMenu } from "@/components/ui/mobile-actions-menu";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 
 // Dynamically import ConnectWallet with SSR disabled to avoid production SSR issues
 // Using a version-based key ensures fresh mount on updates, preventing cache issues
@@ -360,15 +363,35 @@ export default function RootLayout({
         <main className="relative flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 md:p-8">
           <WalletErrorBoundary
             fallback={
-              <div className="flex flex-col items-center justify-center h-full">
-                <h2 className="text-xl font-semibold mb-2">Something went wrong</h2>
-                <p className="text-gray-600 mb-4">Please try refreshing the page or reconnecting your wallet.</p>
-                <button
-                  onClick={() => window.location.reload()}
-                  className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-                >
-                  Refresh Page
-                </button>
+              <div className="flex flex-col items-center justify-center h-full min-h-[400px] px-4">
+                <Card className="w-full max-w-md border-zinc-200 dark:border-zinc-800 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-sm shadow-lg">
+                  <CardContent className="flex flex-col items-center text-center p-8 space-y-6">
+                    <div className="relative">
+                      <div className="absolute inset-0 bg-red-500/10 dark:bg-red-500/20 rounded-full blur-xl" />
+                      <div className="relative flex items-center justify-center w-20 h-20 rounded-full bg-red-50 dark:bg-red-950/30 border-2 border-red-200 dark:border-red-900/50">
+                        <AlertCircle className="w-10 h-10 text-red-600 dark:text-red-400" />
+                      </div>
+                    </div>
+                    
+                    <div className="space-y-2">
+                      <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50">
+                        Something went wrong
+                      </h2>
+                      <p className="text-sm text-zinc-600 dark:text-zinc-400 max-w-sm">
+                        Please try refreshing the page or reconnecting your wallet.
+                      </p>
+                    </div>
+                    
+                    <Button
+                      onClick={() => window.location.reload()}
+                      className="w-full sm:w-auto min-w-[140px]"
+                      size="lg"
+                    >
+                      <RefreshCw className="mr-2 h-4 w-4" />
+                      Refresh Page
+                    </Button>
+                  </CardContent>
+                </Card>
               </div>
             }
           >
diff --git a/src/components/common/overall-layout/proxy-data-loader.tsx b/src/components/common/overall-layout/proxy-data-loader.tsx
index dd81308b..962b32c5 100644
--- a/src/components/common/overall-layout/proxy-data-loader.tsx
+++ b/src/components/common/overall-layout/proxy-data-loader.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import useAppWallet from "@/hooks/useAppWallet";
-import { useProxyData, useProxyActions } from "@/lib/zustand/proxy";
+import { useProxyData, useProxyActions, useProxyStore } from "@/lib/zustand/proxy";
 import { useSiteStore } from "@/lib/zustand/site";
 import { api } from "@/utils/api";
 
@@ -46,7 +46,8 @@ export default function ProxyDataLoader() {
       
       setProxies(appWallet.id, proxyData);
     }
-  }, [apiProxies, appWallet?.id, setProxies]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiProxies, appWallet?.id]); // setProxies is stable from Zustand, no need to include
 
   // Fetch additional data for each proxy
   useEffect(() => {
@@ -68,16 +69,24 @@ export default function ProxyDataLoader() {
                 proxy.paramUtxo,
                 true,
               );
-              await fetchProxyDelegatorsInfo(
-                appWallet.id,
-                proxy.id,
-                proxy.proxyAddress,
-                proxy.authTokenId,
-                appWallet.scriptCbor,
-                network.toString(),
-                proxy.paramUtxo,
-                true,
-              );
+              // Only fetch delegators if DRep is registered
+              // Check if we have drepInfo and it's not null (meaning DRep is registered)
+              const currentProxies = useProxyStore.getState().proxies[appWallet.id] || [];
+              const currentProxy = currentProxies.find(p => p.id === proxy.id);
+              if (currentProxy?.drepInfo !== null && currentProxy?.drepInfo !== undefined) {
+                await fetchProxyDelegatorsInfo(
+                  appWallet.id,
+                  proxy.id,
+                  proxy.proxyAddress,
+                  proxy.authTokenId,
+                  appWallet.scriptCbor,
+                  network.toString(),
+                  proxy.paramUtxo,
+                  true,
+                );
+              } else {
+                console.log(`Skipping delegators fetch for proxy ${proxy.id} - DRep not registered`);
+              }
             } catch (error) {
               console.error(`Error fetching data for proxy ${proxy.id}:`, error);
             }
@@ -85,7 +94,8 @@ export default function ProxyDataLoader() {
         }
       })();
     }
-  }, [proxies, appWallet?.id, appWallet?.scriptCbor, network, fetchProxyBalance, fetchProxyDrepInfo, fetchProxyDelegatorsInfo]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [proxies, appWallet?.id, appWallet?.scriptCbor, network]); // Zustand actions are stable, no need to include them
 
   // Clear proxy data when wallet changes
   useEffect(() => {
diff --git a/src/components/common/row-label-info.tsx b/src/components/common/row-label-info.tsx
index c3bb73c2..2ffecbe3 100644
--- a/src/components/common/row-label-info.tsx
+++ b/src/components/common/row-label-info.tsx
@@ -18,11 +18,14 @@ export default function RowLabelInfo({
   allowOverflow?: boolean;
 }) {
   const { toast } = useToast();
+  // For mobile, stack vertically when allowOverflow is true (for long content like markdown)
+  const isStacked = allowOverflow;
+  
   return (
-    <div className="flex items-center gap-4">
-      <div className="flex max-w-full items-center justify-center gap-2">
+    <div className={`flex ${isStacked ? 'flex-col sm:flex-row' : 'flex-row'} ${isStacked ? 'items-start sm:items-center' : 'items-center'} gap-2 sm:gap-4`}>
+      <div className={`flex ${isStacked ? 'flex-col w-full sm:flex-row sm:max-w-full' : 'max-w-full'} ${isStacked ? 'items-start sm:items-center justify-start sm:justify-center' : 'items-center justify-center'} gap-2`}>
         {label && (
-          <div className="text-nowrap text-sm font-medium leading-none min-w-20">
+          <div className={`text-nowrap text-xs sm:text-sm font-medium leading-none ${isStacked ? 'w-full sm:min-w-20' : 'min-w-20'} flex-shrink-0`}>
             {label}
           </div>
         )}
@@ -37,7 +40,7 @@ export default function RowLabelInfo({
                 duration: 5000,
               });
             }}
-            className="m-0 h-auto max-w-full justify-start truncate p-0"
+            className="m-0 h-auto max-w-full justify-start truncate p-0 text-xs sm:text-sm"
           >
             <Value
               value={value}
@@ -67,10 +70,14 @@ function Value({
   className?: string;
   allowOverflow?: boolean;
 }) {
+  // When allowOverflow is true, allow text to wrap and break normally
+  // When false, truncate with ellipsis
+  const baseClasses = allowOverflow 
+    ? "max-w-full w-full text-xs sm:text-sm text-muted-foreground break-words whitespace-normal"
+    : "max-w-full overflow-hidden truncate whitespace-nowrap text-xs sm:text-sm text-muted-foreground";
+  
   return (
-    <div
-      className={`${className ? className : `max-w-full ${allowOverflow ?? "overflow-hidden truncate whitespace-nowrap"} text-sm text-muted-foreground`}`}
-    >
+    <div className={className || baseClasses}>
       {value}
     </div>
   );
diff --git a/src/components/multisig/proxy/offchain.ts b/src/components/multisig/proxy/offchain.ts
index d0f5ebff..a936bd1d 100644
--- a/src/components/multisig/proxy/offchain.ts
+++ b/src/components/multisig/proxy/offchain.ts
@@ -711,6 +711,19 @@ export class MeshProxyContract extends MeshTxInitiator {
   getDrepDelegators = async (forceRefresh = false) => {
     const drepId = this.getDrepId();
     
+    // First check if DRep is registered - don't fetch delegators if not registered
+    const drepStatus = await this.getDrepStatus(forceRefresh);
+    if (!drepStatus || drepStatus === null) {
+      // DRep is not registered, return empty result
+      console.log(`DRep ${drepId} is not registered, skipping delegators fetch`);
+      return {
+        delegators: [],
+        totalDelegation: "0",
+        totalDelegationADA: 0,
+        count: 0
+      };
+    }
+    
     // Check cache first
     const cacheKey = `${drepId}_delegators`;
     const cached = drepStatusCache.get(cacheKey);
diff --git a/src/components/pages/homepage/wallets/SectionExplanation.tsx b/src/components/pages/homepage/wallets/SectionExplanation.tsx
index d14f5627..4bb1c540 100644
--- a/src/components/pages/homepage/wallets/SectionExplanation.tsx
+++ b/src/components/pages/homepage/wallets/SectionExplanation.tsx
@@ -19,3 +19,4 @@ export default function SectionExplanation({
   );
 }
 
+
diff --git a/src/components/pages/homepage/wallets/WalletBalanceSkeleton.tsx b/src/components/pages/homepage/wallets/WalletBalanceSkeleton.tsx
index ce5d487a..7259098f 100644
--- a/src/components/pages/homepage/wallets/WalletBalanceSkeleton.tsx
+++ b/src/components/pages/homepage/wallets/WalletBalanceSkeleton.tsx
@@ -13,3 +13,4 @@ export default function WalletBalanceSkeleton() {
   );
 }
 
+
diff --git a/src/components/pages/wallet/governance/ballot/BallotModal.tsx b/src/components/pages/wallet/governance/ballot/BallotModal.tsx
new file mode 100644
index 00000000..0f4af635
--- /dev/null
+++ b/src/components/pages/wallet/governance/ballot/BallotModal.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import BallotCard from "./ballot";
+import type { UTxO } from "@meshsdk/core";
+import { Vote as VoteIcon } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+interface BallotModalProps {
+  appWallet: any;
+  selectedBallotId?: string;
+  onSelectBallot: (id: string) => void;
+  utxos: UTxO[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Optional current proposal context (used on the proposal page).
+   * When provided, the ballot card can show contextual UI like
+   * an "Add to ballot" button and highlighting.
+   */
+  currentProposalId?: string;
+  currentProposalTitle?: string;
+  onBallotChanged?: () => void;
+}
+
+export default function BallotModal({
+  appWallet,
+  selectedBallotId,
+  onSelectBallot,
+  utxos,
+  open,
+  onOpenChange,
+  currentProposalId,
+  currentProposalTitle,
+  onBallotChanged,
+}: BallotModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl max-h-[92vh] overflow-hidden flex flex-col p-0 gap-0">
+        <DialogHeader className="px-6 pt-6 pb-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 flex-shrink-0">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-3 mb-2">
+                <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
+                  <VoteIcon className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+                </div>
+                <DialogTitle className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+                  Manage Ballots
+                </DialogTitle>
+              </div>
+              <DialogDescription className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                Organize and vote on governance proposals
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+        <div className="flex-1 min-h-0 overflow-y-auto px-6 py-6 bg-gray-50/50 dark:bg-gray-900/50">
+          <div className="max-w-full">
+            <BallotCard
+              appWallet={appWallet}
+              selectedBallotId={selectedBallotId}
+              onSelectBallot={onSelectBallot}
+              utxos={utxos}
+              currentProposalId={currentProposalId}
+              currentProposalTitle={currentProposalTitle}
+              onBallotChanged={() => {
+                onBallotChanged?.();
+              }}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/pages/wallet/governance/ballot/FloatingBallotSidebar.tsx b/src/components/pages/wallet/governance/ballot/FloatingBallotSidebar.tsx
index ded4ab24..66485be6 100644
--- a/src/components/pages/wallet/governance/ballot/FloatingBallotSidebar.tsx
+++ b/src/components/pages/wallet/governance/ballot/FloatingBallotSidebar.tsx
@@ -92,23 +92,23 @@ export default function FloatingBallotSidebar({
         </button>
 
         {open && (
-          <div className="fixed z-50 left-0 bottom-0 w-full h-[85vh] bg-white dark:bg-gray-900 border-t p-4 shadow-xl animate-slideUp flex flex-col">
-            <div className="flex justify-between items-center mb-2">
-              <span className="font-semibold">Your Ballots</span>
+          <div className="fixed z-50 left-0 bottom-0 w-full h-[85vh] sm:h-[90vh] bg-white dark:bg-gray-900 border-t p-3 sm:p-4 shadow-xl animate-slideUp flex flex-col">
+            <div className="flex justify-between items-center mb-2 sm:mb-3">
+              <span className="font-semibold text-sm sm:text-base">Your Ballots</span>
               {proposalCount > 0 && (
                 <span className="ml-2 inline-block text-xs font-medium text-white bg-blue-500 rounded-full px-2 py-0.5">
                   {proposalCount}
                 </span>
               )}
               <button
-                className="p-2 rounded-full hover:bg-gray-200"
+                className="p-1.5 sm:p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300"
                 onClick={() => setOpen(false)}
                 aria-label="Close"
               >
-                ✕
+                <span className="text-lg sm:text-xl">✕</span>
               </button>
             </div>
-            <div className="flex-1 min-h-0 overflow-y-auto">
+            <div className="flex-1 min-h-0 overflow-y-auto -mx-3 sm:-mx-4 px-3 sm:px-4">
               <BallotCard
                 appWallet={appWallet}
                 selectedBallotId={selectedBallotId}
diff --git a/src/components/pages/wallet/governance/ballot/ballot.tsx b/src/components/pages/wallet/governance/ballot/ballot.tsx
index 79fecdf0..50edfe30 100644
--- a/src/components/pages/wallet/governance/ballot/ballot.tsx
+++ b/src/components/pages/wallet/governance/ballot/ballot.tsx
@@ -8,7 +8,7 @@ import useMultisigWallet from "@/hooks/useMultisigWallet";
 import { useToast } from "@/hooks/use-toast";
 import { useWallet } from "@meshsdk/react";
 import { useUserStore } from "@/lib/zustand/user";
-import React, { useState } from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
 import CardUI from "@/components/ui/card-content";
 import {
   Select,
@@ -30,6 +30,11 @@ import {
 } from "@/components/ui/dialog";
 import { useProxy } from "@/hooks/useProxy";
 import { MeshProxyContract } from "@/components/multisig/proxy/offchain";
+import { CheckCircle2, XCircle, MinusCircle, Loader2, Trash2, Plus, FileText, Vote as VoteIcon, Link2, ChevronDown, ChevronUp } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { hashDrepAnchor } from "@meshsdk/core";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
 
 const GovAction = 1;
 
@@ -43,8 +48,93 @@ export type BallotType = {
   items: string[];
   itemDescriptions: string[];
   choices: string[];
+  anchorUrls: string[];
+  anchorHashes: string[];
 };
 
+// Custom hook for ballot switching logic
+function useBallotSwitching(
+  ballots: BallotType[],
+  selectedBallotId: string | undefined,
+  onSelectBallot: ((id: string) => void) | undefined,
+  currentProposalId: string | undefined,
+) {
+  const handleBallotSelect = useCallback((ballotId: string) => {
+    if (onSelectBallot && ballotId !== selectedBallotId) {
+      onSelectBallot(ballotId);
+    }
+  }, [onSelectBallot, selectedBallotId]);
+
+  const selectedBallot = useMemo(() => {
+    return selectedBallotId
+      ? ballots.find((b) => b.id === selectedBallotId)
+      : undefined;
+  }, [ballots, selectedBallotId]);
+
+  return {
+    selectedBallot,
+    handleBallotSelect,
+  };
+}
+
+// Custom hook for proposal removal logic
+function useProposalRemoval(
+  ballotId: string,
+  refetchBallots: () => Promise<any>,
+  onBallotChanged?: () => void,
+) {
+  const { toast } = useToast();
+  const removeProposalMutation = api.ballot.removeProposalFromBallot.useMutation();
+  const [removingIdx, setRemovingIdx] = React.useState<number | null>(null);
+  const [deleteProposalIdx, setDeleteProposalIdx] = React.useState<number | null>(null);
+
+  const handleDelete = useCallback(async (idx: number) => {
+    if (removingIdx !== null) return; // Prevent multiple simultaneous deletions
+    
+    setRemovingIdx(idx);
+    setDeleteProposalIdx(null); // Close confirmation dialog
+    
+    try {
+      await removeProposalMutation.mutateAsync({ ballotId, index: idx });
+      // Wait a bit for the mutation to complete before refetching
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await refetchBallots();
+      onBallotChanged?.();
+      
+      toast({
+        title: "Proposal Removed",
+        description: "The proposal has been removed from the ballot.",
+        duration: 2000,
+      });
+    } catch (error: unknown) {
+      toast({
+        title: "Error",
+        description: "Failed to remove proposal from ballot.",
+        variant: "destructive",
+      });
+    } finally {
+      setRemovingIdx(null);
+    }
+  }, [ballotId, removingIdx, removeProposalMutation, refetchBallots, onBallotChanged, toast]);
+
+  const requestDelete = useCallback((idx: number) => {
+    setDeleteProposalIdx(idx);
+  }, []);
+
+  const cancelDelete = useCallback(() => {
+    setDeleteProposalIdx(null);
+  }, []);
+
+  return {
+    removingIdx,
+    deleteProposalIdx,
+    handleDelete,
+    requestDelete,
+    cancelDelete,
+    isRemoving: removingIdx !== null,
+  };
+}
+
 export default function BallotCard({
   appWallet,
   onSelectBallot,
@@ -59,11 +149,6 @@ export default function BallotCard({
   selectedBallotId?: string;
   onBallotChanged?: () => void;
   utxos: UTxO[];
-  /**
-   * Optional current proposal context from the proposal page.
-   * When provided, the ballot card can render an "Add to ballot"
-   * button and highlight that proposal in the table.
-   */
   currentProposalId?: string;
   currentProposalTitle?: string;
 }) {
@@ -72,12 +157,11 @@ export default function BallotCard({
   const [ballots, setBallots] = useState<BallotType[]>([]);
   const [creating, setCreating] = useState(false);
 
-  // State for adding the current proposal to a ballot (including move flow)
-  const [moveModal, setMoveModal] = useState<{
-    targetBallotId: string;
-    conflictBallots: BallotType[];
+
+  const [deleteConfirmModal, setDeleteConfirmModal] = useState<{
+    ballotId: string;
+    ballotDescription: string;
   } | null>(null);
-  const [moveLoading, setMoveLoading] = useState(false);
 
   const { toast } = useToast();
 
@@ -103,7 +187,7 @@ export default function BallotCard({
     { enabled: !!(appWallet?.id || userAddress) }
   );
 
-  // Check if we have valid proxy data (proxy enabled, selected, proxies exist, and selected proxy is found)
+  // Check if we have valid proxy data
   const hasValidProxy = !!(isProxyEnabled && selectedProxyId && proxies && proxies.length > 0 && proxies.find((p: any) => p.id === selectedProxyId));
 
   // CreateBallot mutation
@@ -121,8 +205,11 @@ export default function BallotCard({
   const addProposalMutation = api.ballot.addProposalToBallot.useMutation();
   const moveRemoveProposalMutation =
     api.ballot.removeProposalFromBallot.useMutation();
+  const autoHandleRef = React.useRef<string | null>(null);
+  const handledProposalRef = React.useRef<Set<string>>(new Set());
+  const isProcessingRef = React.useRef<boolean>(false);
 
-  // Refresh ballots after submit or on load and ensure a sensible default is selected
+  // Refresh ballots after submit or on load and auto-select first ballot if none selected
   React.useEffect(() => {
     if (!getBallots.data) return;
 
@@ -133,40 +220,39 @@ export default function BallotCard({
     );
     setBallots(sorted);
 
-    // If nothing is selected yet (or the selection no longer exists),
-    // automatically select a sensible default:
-    // 1. Prefer the ballot that already contains the current proposal (when on a proposal page)
-    // 2. Otherwise, prefer the newest ballot that already has proposals
-    // 3. Fallback to the newest ballot
+    // Auto-select first ballot if none selected
     if (!onSelectBallot) return;
 
     const hasSelected =
       selectedBallotId && sorted.some((b) => b.id === selectedBallotId);
 
-    if (!hasSelected) {
+    if (!hasSelected && sorted.length > 0) {
+      // If we have a current proposal, try to find a ballot that contains it
       let ballotToSelect: BallotType | undefined;
-
+      
       if (currentProposalId) {
         ballotToSelect = sorted.find(
           (b) => Array.isArray(b.items) && b.items.includes(currentProposalId),
         );
       }
-
-      if (!ballotToSelect) {
-        ballotToSelect =
-          sorted.find(
-            (b) => Array.isArray(b.items) && b.items.length > 0,
-          ) ?? sorted[0];
+      
+      // Otherwise, select the first (newest) ballot
+      if (sorted.length > 0) {
+        onSelectBallot(ballotToSelect?.id || sorted[0]?.id || "");
       }
-
-      if (!ballotToSelect) return;
-
-      onSelectBallot(ballotToSelect.id);
     }
   }, [getBallots.data, onSelectBallot, selectedBallotId, currentProposalId]);
 
+  // Use ballot switching hook
+  const { selectedBallot, handleBallotSelect } = useBallotSwitching(
+    ballots,
+    selectedBallotId,
+    onSelectBallot,
+    currentProposalId,
+  );
+
 
-  // Proxy ballot vote submission logic
+  // Proxy vote submission logic
   async function handleSubmitProxyVote() {
     if (!selectedBallot || !Array.isArray(selectedBallot.items) || selectedBallot.items.length === 0) {
       toast({
@@ -184,21 +270,22 @@ export default function BallotCard({
       });
       return;
     }
-    if (!hasValidProxy) {
-      // Fall back to standard vote if no valid proxy
-      return handleSubmitVote();
+    if (!hasValidProxy || !selectedProxyId || !proxies) {
+      toast({
+        title: "Proxy not configured",
+        description: "Please select a proxy to continue.",
+        duration: 2000,
+        variant: "destructive",
+      });
+      return;
     }
 
     setLoading(true);
     try {
-      // Get the selected proxy
-      const proxy = proxies?.find((p: any) => p.id === selectedProxyId);
-      if (!proxy) {
-        // Fall back to standard vote if proxy not found
-        return handleSubmitVote();
-      }
+      const proxy = proxies.find((p: any) => p.id === selectedProxyId);
+      if (!proxy) throw new Error("Proxy not found");
 
-      // Create proxy contract instance
+      if (!multisigWallet) throw new Error("Multisig Wallet could not be built.");
       const meshTxBuilder = getTxBuilder(network);
       const proxyContract = new MeshProxyContract(
         {
@@ -214,10 +301,17 @@ export default function BallotCard({
       proxyContract.proxyAddress = proxy.proxyAddress;
 
       // Prepare votes array
-      const votes = selectedBallot.items.map((proposalId: string, index: number) => ({
-        proposalId,
-        voteKind: (selectedBallot.choices?.[index] ?? "Abstain") as "Yes" | "No" | "Abstain",
-      }));
+      const votes = selectedBallot.items.map((proposalId: string, index: number) => {
+        const anchorUrl = selectedBallot.anchorUrls?.[index];
+        const anchorHash = selectedBallot.anchorHashes?.[index];
+        return {
+          proposalId,
+          voteKind: (selectedBallot.choices?.[index] ?? "Abstain") as "Yes" | "No" | "Abstain",
+          ...(anchorUrl && anchorHash
+            ? { anchor: { anchorUrl, anchorDataHash: anchorHash } }
+            : {}),
+        };
+      });
 
       // Vote using proxy
       const txBuilder = await proxyContract.voteProxyDrep(votes, utxos, multisigWallet?.getScript().address);
@@ -361,6 +455,8 @@ export default function BallotCard({
           // Skip invalid proposalId
           continue;
         }
+        const anchorUrl = selectedBallot.anchorUrls?.[i];
+        const anchorHash = selectedBallot.anchorHashes?.[i];
         txBuilder.vote(
           {
             type: "DRep",
@@ -372,6 +468,9 @@ export default function BallotCard({
           },
           {
             voteKind: voteKind,
+            ...(anchorUrl && anchorHash
+              ? { anchor: { anchorUrl, anchorDataHash: anchorHash } }
+              : {}),
           },
         );
       }
@@ -383,7 +482,6 @@ export default function BallotCard({
       await newTransaction({
         txBuilder,
         description: `Ballot Vote: ${selectedBallot.description || ""}`,
-        // Optionally add metadata (not implemented here)
       });
 
       toast({
@@ -393,7 +491,6 @@ export default function BallotCard({
       });
 
       setAlert("Ballot vote transaction successfully created!");
-      // Optionally refresh ballots
       await getBallots.refetch();
       onBallotChanged?.();
     } catch (error: unknown) {
@@ -456,199 +553,241 @@ export default function BallotCard({
       await getBallots.refetch();
       onBallotChanged?.();
     } catch (error: unknown) {
-      // TODO: handle error
+      toast({
+        title: "Error",
+        description: "Failed to create ballot. Please try again.",
+        variant: "destructive",
+      });
     }
     setSubmitting(false);
   }
 
-  // Find the selected ballot if selectedBallotId is set
-  const selectedBallot: BallotType | undefined = selectedBallotId
-    ? ballots.find((b) => b.id === selectedBallotId)
-    : undefined;
-
-  const currentProposalAlreadyInSelected =
-    !!currentProposalId &&
-    !!selectedBallot &&
-    Array.isArray(selectedBallot.items) &&
-    selectedBallot.items.includes(currentProposalId);
-
-  async function performAddCurrentProposal(targetBallotId: string) {
-    if (!currentProposalId) return;
-    await addProposalMutation.mutateAsync({
-      ballotId: targetBallotId,
-      itemDescription:
-        currentProposalTitle ??
-        (selectedBallot?.description ?? "Untitled proposal"),
-      item: currentProposalId,
-      // Default to Abstain; user can fine-tune per-proposal choice in the table.
-      choice: "Abstain",
-    });
-  }
-
-  async function handleAddCurrentProposalToSelectedBallot() {
+  // Auto-add current proposal to selected ballot when modal opens
+  React.useEffect(() => {
     if (!currentProposalId || !selectedBallotId || !getBallots.data) return;
+    if (isProcessingRef.current) return; // Prevent concurrent processing
+    if (handledProposalRef.current.has(currentProposalId)) return;
+    const autoKey = `${selectedBallotId}-${currentProposalId}`;
+    if (autoHandleRef.current === autoKey) return;
 
-    // Ensure a proposal can only exist on a single ballot at a time.
-    const ballotsWithProposal =
-      getBallots.data.filter(
-        (b) =>
-          b.id !== selectedBallotId &&
-          Array.isArray(b.items) &&
-          b.items.includes(currentProposalId),
-      ) ?? [];
+    const selectedBallot = getBallots.data.find((b) => b.id === selectedBallotId);
+    if (!selectedBallot) return;
 
-    if (ballotsWithProposal.length > 0) {
-      setMoveModal({
-        targetBallotId: selectedBallotId,
-        conflictBallots: ballotsWithProposal,
-      });
+    // Check if proposal is already in this ballot
+    const alreadyInBallot = Array.isArray(selectedBallot.items) &&
+      selectedBallot.items.includes(currentProposalId);
+
+    if (alreadyInBallot) {
+      autoHandleRef.current = autoKey;
+      handledProposalRef.current.add(currentProposalId);
       return;
     }
 
-    await performAddCurrentProposal(selectedBallotId);
-    toast({
-      title: "Added to Ballot",
-      description: "Proposal successfully added to the ballot.",
-      duration: 800,
-    });
-    await getBallots.refetch();
-    onBallotChanged?.();
-  }
-
-  async function confirmMoveCurrentProposal() {
-    if (!moveModal || !currentProposalId) return;
+    // Set processing flag
+    isProcessingRef.current = true;
+    autoHandleRef.current = autoKey;
 
-    try {
-      setMoveLoading(true);
+    // Check if proposal is in another ballot
+    const ballotsWithProposal = getBallots.data.filter(
+      (b) =>
+        b.id !== selectedBallotId &&
+        Array.isArray(b.items) &&
+        b.items.includes(currentProposalId),
+    );
 
-      // Remove proposal from all other ballots before adding to the selected one
-      for (const b of moveModal.conflictBallots) {
-        const index = b.items.findIndex(
-          (item: string) => item === currentProposalId,
-        );
-        if (index >= 0) {
-          await moveRemoveProposalMutation.mutateAsync({
-            ballotId: b.id,
-            index,
-          });
-        }
-      }
+    // If in another ballot, automatically move it
+    if (ballotsWithProposal.length > 0) {
+      Promise.all(
+        ballotsWithProposal.map(async (b) => {
+          const index = b.items.findIndex((item: string) => item === currentProposalId);
+          if (index >= 0) {
+            await moveRemoveProposalMutation.mutateAsync({
+              ballotId: b.id,
+              index,
+            });
+          }
+        })
+      ).then(() => {
+        addProposalMutation.mutate({
+          ballotId: selectedBallotId,
+          itemDescription: currentProposalTitle || "Untitled proposal",
+          item: currentProposalId,
+          choice: "Abstain",
+        }, {
+          onSuccess: () => {
+            handledProposalRef.current.add(currentProposalId);
+            isProcessingRef.current = false;
+            toast({
+              title: "Moved to Ballot",
+              description: "Proposal moved to the selected ballot.",
+              duration: 2000,
+            });
+            getBallots.refetch();
+            onBallotChanged?.();
+          },
+          onError: () => {
+            isProcessingRef.current = false;
+            autoHandleRef.current = null; // Reset on error
+          },
+        });
+      }).catch(() => {
+        isProcessingRef.current = false;
+        autoHandleRef.current = null;
+      });
+      return;
+    }
 
-      await performAddCurrentProposal(moveModal.targetBallotId);
+    // Auto-add to selected ballot
+    addProposalMutation.mutate({
+      ballotId: selectedBallotId,
+      itemDescription: currentProposalTitle || "Untitled proposal",
+      item: currentProposalId,
+      choice: "Abstain",
+    }, {
+      onSuccess: () => {
+        handledProposalRef.current.add(currentProposalId);
+        isProcessingRef.current = false;
+        toast({
+          title: "Added to Ballot",
+          description: "Proposal added to the selected ballot.",
+          duration: 2000,
+        });
+        getBallots.refetch();
+        onBallotChanged?.();
+      },
+      onError: (error: any) => {
+        isProcessingRef.current = false;
+        autoHandleRef.current = null; // Reset on error
+        toast({
+          title: "Error",
+          description: error?.message || "Failed to add proposal to ballot.",
+          variant: "destructive",
+        });
+      },
+    });
+  }, [currentProposalId, selectedBallotId, getBallots.data, currentProposalTitle]);
 
-      toast({
-        title: "Proposal moved",
-        description:
-          "Proposal was moved from the other ballot to the selected ballot.",
-        duration: 1500,
-      });
-      await getBallots.refetch();
-      onBallotChanged?.();
-    } finally {
-      setMoveLoading(false);
-      setMoveModal(null);
+  // Calculate vote summary
+  const voteSummary = useMemo(() => {
+    if (!selectedBallot || !Array.isArray(selectedBallot.items)) {
+      return { total: 0, yes: 0, no: 0, abstain: 0 };
     }
-  }
+    const choices = selectedBallot.choices || [];
+    return {
+      total: selectedBallot.items.length,
+      yes: choices.filter((c: string) => c === "Yes").length,
+      no: choices.filter((c: string) => c === "No").length,
+      abstain: choices.filter((c: string) => c === "Abstain").length,
+    };
+  }, [selectedBallot]);
+
 
   return (
-    <CardUI
-      title="Ballots"
-      description="Submit a new governance ballot for your wallet."
-      cardClassName="w-full bg-white/90 dark:bg-slate-900/90 border border-white/60 dark:border-slate-700/80 backdrop-blur-md"
-    >
-      <div className="flex-1 min-h-0 overflow-y-auto">
-        <div className="flex items-center gap-2 overflow-x-auto border-b border-gray-300 pb-2 mb-4 dark:border-gray-600">
+    <div className="flex flex-col h-full">
+      {/* Ballot Tabs */}
+      <div className="flex items-center gap-2 overflow-x-auto border-b border-gray-200 dark:border-gray-700 pb-3 mb-4 scrollbar-hide">
+        <div className="flex items-center gap-1.5 flex-1 min-w-0">
           {ballots.map((b) => (
             <button
               key={b.id}
-              className={`px-3 py-1 rounded-t-md font-medium transition ${
+              className={`px-3 py-1.5 rounded-lg font-medium text-sm whitespace-nowrap transition-all ${
                 b.id === selectedBallotId
-                  ? "bg-white text-gray-900 border border-b-0 border-gray-300 shadow-sm dark:bg-slate-900 dark:text-gray-100 dark:border-slate-700 hover:border-gray-400 dark:hover:border-slate-500"
-                  : "bg-white/70 text-gray-700 hover:bg-white dark:bg-slate-800 dark:text-gray-200 dark:hover:bg-slate-700 border border-transparent hover:border-gray-400 dark:hover:border-slate-500"
+                  ? "bg-blue-600 text-white shadow-md"
+                  : "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
               }`}
-              onClick={() => onSelectBallot && onSelectBallot(b.id)}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleBallotSelect(b.id);
+              }}
             >
-              <span
-                className={
-                  b.id === selectedBallotId
-                    ? "drop-shadow-[0_0_6px_rgba(255,255,255,0.8)] dark:drop-shadow-[0_0_8px_rgba(148,163,184,0.9)]"
-                    : "text-xs"
-                }
-              >
-                {b.description || "Untitled"}
-              </span>
+              {b.description || "Untitled"}
             </button>
-        ))}
+          ))}
+        </div>
         <button
-          className="ml-auto px-3 py-1 rounded-t-md bg-white text-gray-700 hover:bg-gray-100 border border-gray-300 hover:border-gray-400 dark:bg-slate-900 dark:text-gray-100 dark:hover:bg-slate-800 dark:border-slate-600 dark:hover:border-slate-500"
+          className="px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 text-sm flex-shrink-0 flex items-center gap-1.5 transition-colors font-medium"
           onClick={() => {
-              if (creating) {
-                // Hide the create-input row and clear any pending text
+            if (creating) {
+              setCreating(false);
+              setDescription("");
+            } else {
+              setCreating(true);
+            }
+          }}
+        >
+          {creating ? (
+            <>
+              <span>−</span>
+              <span>Cancel</span>
+            </>
+          ) : (
+            <>
+              <Plus className="h-4 w-4" />
+              <span>New</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Create Ballot Input */}
+      {creating && (
+        <div className="flex gap-2 mb-4 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
+          <input
+            type="text"
+            className="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-sm dark:bg-gray-900 dark:text-white flex-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="Enter ballot name..."
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && description.trim() && !submitting) {
+                handleSubmit(e);
+              }
+              if (e.key === "Escape") {
                 setCreating(false);
                 setDescription("");
-              } else {
-                // Show the create-input row
-                setCreating(true);
               }
             }}
+            disabled={submitting}
+            autoFocus
+          />
+          <Button
+            onClick={handleSubmit}
+            disabled={submitting || !description.trim()}
+            size="sm"
+            className="px-4"
           >
-            {creating ? "−" : "+"}
-          </button>
+            {submitting ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              "Create"
+            )}
+          </Button>
         </div>
-        {creating && (
-          <div className="flex gap-2 mt-2 items-center">
-            <input
-              type="text"
-              className="px-2 py-1 rounded border border-gray-300 text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white"
-              placeholder="Ballot name"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={submitting}
-            />
-            <button
-              onClick={handleSubmit}
-              disabled={submitting || !description.trim()}
-              className="px-3 py-1 rounded bg-white/80 text-gray-800 hover:bg-white shadow-sm disabled:opacity-50 border border-gray-200 hover:border-gray-300 dark:bg-slate-900 dark:text-gray-100 dark:hover:bg-slate-800 dark:border-slate-700 dark:hover:border-slate-500"
-            >
-              Add
-            </button>
-          </div>
-        )}
-        <div className="flex-1 overflow-auto">
-          {getBallots.isLoading ? (
-            <div>Loading ballots...</div>
-          ) : ballots.length === 0 ? (
-            <div className="text-sm text-gray-500">No ballots yet.</div>
-          ) : null}
+      )}
+
+      {/* Loading State */}
+      {getBallots.isLoading && (
+        <div className="flex flex-col items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-400 mb-3" />
+          <p className="text-sm text-gray-500 dark:text-gray-400">Loading ballots...</p>
         </div>
-        {/* Ballot overview table for selected ballot */}
-        <div className="mt-2 flex-1 overflow-auto">
-          {/* Contextual 'Add to ballot' button only on proposal pages
-              (i.e. when currentProposalId is provided).
-              - If not on this ballot yet: show Add button
-              - If already on this ballot: show an informational message */}
-          {selectedBallot && currentProposalId && (
-            <div className="mb-1 flex justify-end">
-                {!currentProposalAlreadyInSelected ? (
-                  <Button
-                    size="sm"
-                    className="h-6 px-3 rounded-full bg-gray-100 hover:!bg-gray-900 text-gray-900 hover:!text-white text-xs font-medium shadow-none border border-gray-300 hover:border-gray-500 transition-colors"
-                    disabled={moveLoading}
-                    onClick={handleAddCurrentProposalToSelectedBallot}
-                  >
-                    Add current proposal to this ballot
-                  </Button>
-                ) : (
-                <span className="h-6 inline-flex items-center px-3 rounded-full text-xs font-medium text-emerald-500 bg-emerald-500/10 border border-emerald-500/30">
-                  Proposal is on this ballot
-                </span>
-              )}
-            </div>
-          )}
+      )}
+
+      {/* Empty State - No Ballots */}
+      {!getBallots.isLoading && ballots.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+          <FileText className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
+          <p className="text-base font-medium text-gray-700 dark:text-gray-300 mb-2">No ballots yet</p>
+          <p className="text-sm text-gray-500 dark:text-gray-500">Create your first ballot to organize proposals for voting</p>
+        </div>
+      )}
 
-          {selectedBallot ? (
-            Array.isArray(selectedBallot.items) &&
-            selectedBallot.items.length > 0 ? (
+      {/* Ballot Content */}
+      {!getBallots.isLoading && selectedBallot && (
+        <>
+          {Array.isArray(selectedBallot.items) && selectedBallot.items.length > 0 ? (
+            <>
               <BallotOverviewTable
                 ballot={selectedBallot}
                 ballotId={selectedBallot.id}
@@ -656,16 +795,33 @@ export default function BallotCard({
                 onBallotChanged={onBallotChanged}
                 currentProposalId={currentProposalId}
               />
-            ) : (
-              <div className="text-sm text-gray-500">No proposals added yet.</div>
-            )
-          ) : (
-            <div className="text-sm text-gray-500">No proposals added yet.</div>
-          )}
-          {selectedBallot && (
-            <>
+              
+              {/* Vote Summary */}
+              <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
+                <div className="flex items-center justify-between flex-wrap gap-3">
+                  <div className="flex items-center gap-2">
+                    <VoteIcon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                      {voteSummary.total} {voteSummary.total === 1 ? 'proposal' : 'proposals'}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <Badge variant="outline" className="bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800">
+                      Yes: {voteSummary.yes}
+                    </Badge>
+                    <Badge variant="outline" className="bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800">
+                      No: {voteSummary.no}
+                    </Badge>
+                    <Badge variant="outline" className="bg-gray-50 dark:bg-gray-800/50 text-gray-700 dark:text-gray-400 border-gray-200 dark:border-gray-700">
+                      Abstain: {voteSummary.abstain}
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+
+              {/* Proxy Warning */}
               {isProxyEnabled && proxies && proxies.length > 0 && !selectedProxyId && (
-                <div className="mt-2 p-2 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
+                <div className="mt-3 p-3 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                   <p className="text-xs text-yellow-800 dark:text-yellow-200 font-medium">
                     Proxy Mode Active - Select a proxy to continue
                   </p>
@@ -674,58 +830,89 @@ export default function BallotCard({
                   </p>
                 </div>
               )}
-              <Button
-                variant="default"
-                className="mt-4 mb-4 ml-2 px-6 py-2 rounded-full bg-white/95 text-gray-900 text-sm md:text-base font-semibold shadow-lg ring-1 ring-white/70 hover:bg-white hover:shadow-xl hover:-translate-y-0.5 hover:ring-2 hover:ring-white border border-transparent hover:border-gray-400 transition-transform transition-shadow dark:bg-slate-900 dark:text-gray-50 dark:hover:bg-slate-800 dark:ring-slate-400/60 dark:hover:border-slate-400"
-                onClick={hasValidProxy ? handleSubmitProxyVote : handleSubmitVote}
-                disabled={loading}
-              >
-                {loading ? "Loading..." : `Submit Ballot Vote${hasValidProxy ? " (Proxy Mode)" : ""}`}
-              </Button>
-              <Button
-                variant="outline"
-                className="mt-4 mb-4 ml-3 bg-white/80 text-gray-700 hover:bg-white hover:text-red-600 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-red-400 border border-gray-200 hover:border-red-400 dark:border-white/10 dark:hover:border-red-500"
-                onClick={async () => {
-                  try {
-                    await deleteBallot.mutateAsync({ ballotId: selectedBallot.id });
-                    await getBallots.refetch();
-                    toast({
-                      title: "Ballot Deleted",
-                      description: `Ballot "${selectedBallot.description}" was removed.`,
-                      duration: 1000,
-                      variant: "destructive",
-                    });
-                    onBallotChanged?.();
-                  } catch (error: unknown) {
-                    // handle error
-                  }
-                }}
-              >
-                Delete Ballot
-              </Button>
+
+              {/* Action Buttons */}
+              <div className="flex gap-3 mt-4">
+                <Button
+                  variant="default"
+                  className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium"
+                  onClick={hasValidProxy ? handleSubmitProxyVote : handleSubmitVote}
+                  disabled={loading || !selectedBallot.items || selectedBallot.items.length === 0 || !utxos || utxos.length === 0}
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Submitting...
+                    </>
+                  ) : (
+                    <>
+                      <VoteIcon className="mr-2 h-4 w-4" />
+                      Submit Vote{hasValidProxy ? " (Proxy)" : ""}
+                    </>
+                  )}
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="px-3 border-red-300 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-400 dark:hover:border-red-600"
+                  onClick={() => setDeleteConfirmModal({
+                    ballotId: selectedBallot.id,
+                    ballotDescription: selectedBallot.description || "Untitled ballot"
+                  })}
+                >
+                  <Trash2 className="h-4 w-4 text-red-600 dark:text-red-400" />
+                </Button>
+              </div>
             </>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+              <VoteIcon className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
+              <p className="text-base font-medium text-gray-700 dark:text-gray-300 mb-2">No proposals in this ballot</p>
+              <p className="text-sm text-gray-500 dark:text-gray-500">Add proposals to start voting</p>
+              <div className="mt-4 flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="border-red-300 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-400 dark:hover:border-red-600 text-red-700 dark:text-red-300"
+                  onClick={() =>
+                    setDeleteConfirmModal({
+                      ballotId: selectedBallot.id,
+                      ballotDescription: selectedBallot.description || "Untitled ballot",
+                    })
+                  }
+                >
+                  Delete Ballot
+                </Button>
+              </div>
+            </div>
           )}
+        </>
+      )}
+
+      {/* Empty State - No Ballot Selected */}
+      {!getBallots.isLoading && ballots.length > 0 && !selectedBallot && (
+        <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+          <VoteIcon className="h-16 w-16 text-gray-300 dark:text-gray-600 mb-4" />
+          <p className="text-base font-medium text-gray-700 dark:text-gray-300 mb-2">Select a ballot to view proposals</p>
+          <p className="text-sm text-gray-500 dark:text-gray-500">Or create a new ballot to get started</p>
         </div>
-      </div>
-      {/* Modal to confirm moving proposal between ballots when adding from a proposal page */}
+      )}
+
+      {/* Confirmation dialog for deleting ballot */}
       <Dialog
-        open={!!moveModal}
+        open={!!deleteConfirmModal}
         onOpenChange={(open) => {
-          if (!open) setMoveModal(null);
+          if (!open) setDeleteConfirmModal(null);
         }}
       >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Move proposal to selected ballot?</DialogTitle>
+            <DialogTitle>Delete Ballot?</DialogTitle>
             <DialogDescription>
-              {moveModal && (
+              {deleteConfirmModal && (
                 <span>
-                  This proposal is already on ballot{" "}
-                  {moveModal.conflictBallots
-                    .map((b) => b.description || "Untitled ballot")
-                    .join(", ")}
-                  . If you continue, it will be removed from that ballot and
-                  added to the currently selected ballot.
+                  Are you sure you want to delete the ballot "{deleteConfirmModal.ballotDescription}"? 
+                  This action cannot be undone and will remove all proposals from this ballot.
                 </span>
               )}
             </DialogDescription>
@@ -734,22 +921,216 @@ export default function BallotCard({
             <Button
               variant="outline"
               className="border border-gray-300 hover:border-gray-400 dark:border-slate-600 dark:hover:border-slate-400"
-              onClick={() => setMoveModal(null)}
-              disabled={moveLoading}
+              onClick={() => setDeleteConfirmModal(null)}
+              disabled={deleteBallot.isPending}
             >
               Cancel
             </Button>
             <Button
-              onClick={confirmMoveCurrentProposal}
-              disabled={moveLoading}
-              className="bg-blue-600 hover:bg-blue-700 text-white border border-blue-500 hover:border-blue-300"
+              onClick={async () => {
+                if (!deleteConfirmModal) return;
+                try {
+                  await deleteBallot.mutateAsync({ ballotId: deleteConfirmModal.ballotId });
+                  await getBallots.refetch();
+                  toast({
+                    title: "Ballot Deleted",
+                    description: `Ballot "${deleteConfirmModal.ballotDescription}" was removed.`,
+                    duration: 2000,
+                    variant: "destructive",
+                  });
+                  setDeleteConfirmModal(null);
+                  onBallotChanged?.();
+                } catch (error: unknown) {
+                  toast({
+                    title: "Error",
+                    description: "Failed to delete ballot. Please try again.",
+                    variant: "destructive",
+                  });
+                }
+              }}
+              disabled={deleteBallot.isPending}
+              className="bg-red-600 hover:bg-red-700 text-white border border-red-500 hover:border-red-300"
             >
-              {moveLoading ? "Moving..." : "Move proposal"}
+              {deleteBallot.isPending ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                <>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete
+                </>
+              )}
             </Button>
           </div>
         </DialogContent>
       </Dialog>
-    </CardUI>
+    </div>
+  );
+}
+
+// Proposal Rationale Editor Component
+function ProposalRationaleEditor({
+  idx,
+  rationaleState,
+  onStateChange,
+  onUpload,
+  onLoadFromUrl,
+  loading,
+}: {
+  idx: number;
+  rationaleState?: { json: string; url: string; hash: string; loading: boolean; comment?: string };
+  onStateChange: (updates: Partial<{ json: string; url: string; hash: string; loading: boolean; comment?: string }>) => void;
+  onUpload: () => void;
+  onLoadFromUrl: (url?: string) => void;
+  loading: boolean;
+}) {
+  const state = rationaleState || { json: "", url: "", hash: "", loading: false, comment: "" };
+
+  // Construct JSON-LD from comment following CIP-100 structure
+  const constructJsonLdFromComment = useCallback((comment: string) => {
+    const jsonLd = {
+      "@context": {
+        "CIP100": "https://github.com/cardano-foundation/CIPs/blob/master/CIP-0100/README.md#",
+        "hashAlgorithm": "CIP100:hashAlgorithm",
+        "body": {
+          "@id": "CIP100:body",
+          "@context": {
+            "references": {
+              "@id": "CIP100:references",
+              "@container": "@set",
+              "@context": {
+                "GovernanceMetadata": "CIP100:GovernanceMetadataReference",
+                "Other": "CIP100:OtherReference",
+                "label": "CIP100:reference-label",
+                "uri": "CIP100:reference-uri",
+                "referenceHash": {
+                  "@id": "CIP100:referenceHash",
+                  "@context": {
+                    "hashDigest": "CIP100:hashDigest",
+                    "hashAlgorithm": "CIP100:hashAlgorithm"
+                  }
+                }
+              }
+            },
+            "comment": "CIP100:comment",
+            "externalUpdates": {
+              "@id": "CIP100:externalUpdates",
+              "@context": {
+                "title": "CIP100:update-title",
+                "uri": "CIP100:uri"
+              }
+            }
+          }
+        },
+        "authors": {
+          "@id": "CIP100:authors",
+          "@container": "@set",
+          "@context": {
+            "name": "http://xmlns.com/foaf/0.1/name",
+            "witness": {
+              "@id": "CIP100:witness",
+              "@context": {
+                "witnessAlgorithm": "CIP100:witnessAlgorithm",
+                "publicKey": "CIP100:publicKey",
+                "signature": "CIP100:signature"
+              }
+            }
+          }
+        }
+      },
+      "authors": [],
+      "body": {
+        "comment": comment.trim()
+      },
+      "hashAlgorithm": "blake2b-256"
+    };
+    return JSON.stringify(jsonLd, null, 2);
+  }, []);
+
+  const handleCommentChange = useCallback((comment: string) => {
+    if (comment.trim()) {
+      const jsonLd = constructJsonLdFromComment(comment);
+      onStateChange({ comment, json: jsonLd });
+    } else {
+      onStateChange({ comment, json: "" });
+    }
+  }, [constructJsonLdFromComment, onStateChange]);
+
+  return (
+    <div className="space-y-3 rounded-lg border border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-900 p-4">
+      <div className="flex items-center justify-between">
+        <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">Voting Rationale (Optional)</p>
+        {state.hash && (
+          <Badge variant="outline" className="text-[10px] bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400">
+            Hash: {state.hash.slice(0, 16)}...
+          </Badge>
+        )}
+      </div>
+      <div className="space-y-3">
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-gray-700 dark:text-gray-300">Comment</label>
+          <Textarea
+            value={state.comment || ""}
+            onChange={(e) => handleCommentChange(e.target.value)}
+            placeholder="Enter your voting rationale comment..."
+            className="min-h-[80px] text-xs"
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-xs font-medium text-gray-700 dark:text-gray-300">Rationale URL (optional)</label>
+          <div className="flex gap-2">
+            <Input
+              type="url"
+              value={state.url}
+              onChange={(e) => onStateChange({ url: e.target.value })}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && state.url.trim() && !loading) {
+                  onLoadFromUrl();
+                }
+              }}
+              placeholder="https://ipfs.io/ipfs/..."
+              className="text-xs flex-1"
+            />
+            {state.url && (
+              <Button 
+                size="sm" 
+                variant="outline" 
+                onClick={() => onLoadFromUrl()} 
+                disabled={loading}
+                className="text-xs"
+              >
+                {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : "Load"}
+              </Button>
+            )}
+          </div>
+        </div>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={onUpload}
+          disabled={loading || !state.json.trim()}
+          className="w-full text-xs"
+        >
+          {loading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : null}
+          Upload to IPFS & Save
+        </Button>
+      </div>
+      {state.json && (
+        <details className="mt-2">
+          <summary className="text-xs font-medium text-gray-600 dark:text-gray-400 cursor-pointer hover:text-gray-900 dark:hover:text-gray-100">
+            View JSON-LD
+          </summary>
+          <Textarea
+            value={state.json}
+            onChange={(e) => onStateChange({ json: e.target.value })}
+            className="mt-2 min-h-[120px] text-xs font-mono"
+            readOnly={!state.comment}
+          />
+        </details>
+      )}
+    </div>
   );
 }
 
@@ -767,106 +1148,556 @@ function BallotOverviewTable({
   onBallotChanged?: () => void;
   currentProposalId?: string;
 }) {
-  // Add state for updating and the update mutation
+  const { toast } = useToast();
   const updateChoiceMutation = api.ballot.updateChoice.useMutation();
+  const updateAnchorMutation = api.ballot.updateProposalAnchor.useMutation();
   const [updatingIdx, setUpdatingIdx] = React.useState<number | null>(null);
-  const removeProposalMutation = api.ballot.removeProposalFromBallot.useMutation();
-  const [removingIdx, setRemovingIdx] = React.useState<number | null>(null);
+  const [expandedRationaleIdx, setExpandedRationaleIdx] = React.useState<number | null>(null);
+  const [rationaleStates, setRationaleStates] = React.useState<Record<number, {
+    json: string;
+    url: string;
+    hash: string;
+    loading: boolean;
+    comment?: string;
+  }>>({});
+  
+  const {
+    removingIdx,
+    deleteProposalIdx,
+    handleDelete,
+    requestDelete,
+    cancelDelete,
+    isRemoving,
+  } = useProposalRemoval(ballotId, refetchBallots, onBallotChanged);
 
-  async function handleDelete(idx: number) {
-    setRemovingIdx(idx);
+  const computeHashFromJson = useCallback((jsonData: unknown) => {
+    return hashDrepAnchor(jsonData as Record<string, unknown>);
+  }, []);
+
+  // Initialize rationale states from ballot data and auto-load existing anchors
+  React.useEffect(() => {
+    const states: Record<number, { json: string; url: string; hash: string; loading: boolean; comment?: string }> = {};
+    const loadPromises: Promise<void>[] = [];
+    
+    ballot.items.forEach((_, idx) => {
+      const anchorUrl = ballot.anchorUrls?.[idx] || "";
+      states[idx] = {
+        json: "",
+        url: anchorUrl,
+        hash: ballot.anchorHashes?.[idx] || "",
+        loading: !!anchorUrl.trim(), // Set loading if we have a URL to fetch
+        comment: "",
+      };
+      
+      // Auto-load rationale if anchor URL exists
+      if (anchorUrl.trim()) {
+        const loadPromise = fetch(anchorUrl)
+          .then(async (res) => {
+            if (!res.ok) throw new Error("Failed to fetch rationale");
+            const data = await res.json();
+            const hash = computeHashFromJson(data);
+            const comment = data?.body?.comment || "";
+            setRationaleStates(prev => ({ 
+              ...prev, 
+              [idx]: { 
+                json: JSON.stringify(data, null, 2),
+                url: anchorUrl,
+                hash,
+                comment,
+                loading: false 
+              } 
+            }));
+          })
+          .catch(() => {
+            // Silently fail - user can manually reload if needed
+            setRationaleStates(prev => {
+              const currentState = prev[idx] || states[idx];
+              return {
+                ...prev,
+                [idx]: {
+                  json: currentState?.json || "",
+                  url: currentState?.url || "",
+                  hash: currentState?.hash || "",
+                  comment: currentState?.comment || "",
+                  loading: false
+                }
+              };
+            });
+          });
+        loadPromises.push(loadPromise);
+      }
+    });
+    
+    // Set initial states first
+    setRationaleStates(states);
+    
+    // Auto-load will happen asynchronously via the promises
+  }, [ballot.items, ballot.anchorUrls, ballot.anchorHashes, computeHashFromJson]);
+
+  const getChoiceColor = (choice: string) => {
+    switch (choice) {
+      case "Yes":
+        return "text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800";
+      case "No":
+        return "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800";
+      case "Abstain":
+        return "text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700";
+      default:
+        return "text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700";
+    }
+  };
+
+  const getChoiceIcon = (choice: string) => {
+    switch (choice) {
+      case "Yes":
+        return CheckCircle2;
+      case "No":
+        return XCircle;
+      case "Abstain":
+        return MinusCircle;
+      default:
+        return MinusCircle;
+    }
+  };
+
+  const handleChoiceChange = useCallback(async (idx: number, newValue: string) => {
+    setUpdatingIdx(idx);
     try {
-      await removeProposalMutation.mutateAsync({ ballotId, index: idx });
+      await updateChoiceMutation.mutateAsync({
+        ballotId,
+        index: idx,
+        choice: newValue,
+      });
       await refetchBallots();
       onBallotChanged?.();
     } catch (error: unknown) {
-      // Optionally handle error
+      toast({
+        title: "Error",
+        description: "Failed to update vote choice.",
+        variant: "destructive",
+      });
+    } finally {
+      setUpdatingIdx(null);
     }
-    setRemovingIdx(null);
-  }
+  }, [ballotId, updateChoiceMutation, refetchBallots, onBallotChanged, toast]);
+
+  const uploadRationaleToIpfs = useCallback(async (idx: number) => {
+    const state = rationaleStates[idx];
+    if (!state?.json.trim()) {
+      toast({
+        title: "Missing rationale",
+        description: "Add rationale JSON-LD before uploading.",
+        variant: "destructive",
+      });
+      return;
+    }
+    setRationaleStates(prev => ({ ...prev, [idx]: { ...prev[idx]!, loading: true } }));
+    try {
+      const parsed = JSON.parse(state.json);
+      const response = await fetch("/api/pinata-storage/put", {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          pathname: `rationale/rationale-${Date.now()}.jsonld`,
+          value: JSON.stringify(parsed, null, 2),
+        }),
+      });
+      if (!response.ok) {
+        const err = await response.json();
+        throw new Error(err?.error || "Upload failed");
+      }
+      const res = await response.json();
+      const hash = computeHashFromJson(parsed);
+      setRationaleStates(prev => ({ 
+        ...prev, 
+        [idx]: { 
+          ...prev[idx]!, 
+          url: res.url, 
+          hash,
+          loading: false 
+        } 
+      }));
+      await updateAnchorMutation.mutateAsync({
+        ballotId,
+        index: idx,
+        anchorUrl: res.url,
+        anchorHash: hash,
+      });
+      await refetchBallots();
+      toast({
+        title: "Rationale uploaded",
+        description: "Anchor URL and hash saved.",
+      });
+    } catch (error: unknown) {
+      setRationaleStates(prev => ({ ...prev, [idx]: { ...prev[idx]!, loading: false } }));
+      toast({
+        title: "Upload failed",
+        description: error instanceof Error ? error.message : "Could not upload rationale.",
+        variant: "destructive",
+      });
+    }
+  }, [rationaleStates, computeHashFromJson, ballotId, updateAnchorMutation, refetchBallots, toast]);
+
+  const loadRationaleFromUrl = useCallback(async (idx: number, overrideUrl?: string) => {
+    const state = rationaleStates[idx];
+    const targetUrl = (overrideUrl ?? state?.url ?? "").trim();
+    if (!targetUrl) {
+      toast({
+        title: "Missing URL",
+        description: "Enter a rationale URL to load.",
+        variant: "destructive",
+      });
+      return;
+    }
+    setRationaleStates(prev => ({ ...prev, [idx]: { ...prev[idx]!, loading: true } }));
+    try {
+      const res = await fetch(targetUrl);
+      if (!res.ok) throw new Error("Failed to fetch rationale");
+      const data = await res.json();
+      const hash = computeHashFromJson(data);
+      // Extract comment from loaded JSON-LD if present
+      const comment = data?.body?.comment || "";
+      setRationaleStates(prev => ({ 
+        ...prev, 
+        [idx]: { 
+          ...prev[idx]!, 
+          json: JSON.stringify(data, null, 2),
+          url: targetUrl,
+          hash,
+          comment,
+          loading: false 
+        } 
+      }));
+      await updateAnchorMutation.mutateAsync({
+        ballotId,
+        index: idx,
+        anchorUrl: targetUrl,
+        anchorHash: hash,
+      });
+      await refetchBallots();
+      toast({
+        title: "Rationale loaded",
+        description: "Anchor hash computed and saved.",
+      });
+    } catch (error: unknown) {
+      setRationaleStates(prev => ({ ...prev, [idx]: { ...prev[idx]!, loading: false } }));
+      toast({
+        title: "Load failed",
+        description: error instanceof Error ? error.message : "Could not load rationale.",
+        variant: "destructive",
+      });
+    }
+  }, [rationaleStates, computeHashFromJson, ballotId, updateAnchorMutation, refetchBallots, toast]);
 
   return (
-    <div className="overflow-x-auto rounded-lg shadow">
-      <table className="min-w-full text-sm text-gray-100">
-        <thead>
-          <tr className="border-b border-white/10">
-            <th className="px-4 py-2 text-left font-semibold">#</th>
-            <th className="px-4 py-2 text-left font-semibold">Title</th>
-            <th className="px-4 py-2 text-right font-semibold">Choice / Delete</th>
-          </tr>
-        </thead>
-        <tbody>
+    <>
+      <div className="w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden">
+        {/* Desktop Table View */}
+        <div className="hidden md:block overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                <th className="px-4 py-3 text-left font-semibold text-gray-700 dark:text-gray-300 w-12">#</th>
+                <th className="px-4 py-3 text-left font-semibold text-gray-700 dark:text-gray-300">Proposal</th>
+                <th className="px-4 py-3 text-left font-semibold text-gray-700 dark:text-gray-300 w-40">Vote</th>
+                <th className="px-4 py-3 text-right font-semibold text-gray-700 dark:text-gray-300 w-20">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {ballot.items.map((item: string, idx: number) => {
+                const choice = ballot.choices?.[idx] ?? "Abstain";
+                const ChoiceIcon = getChoiceIcon(choice);
+                const choiceColor = getChoiceColor(choice);
+                
+                return (
+                  <React.Fragment key={`${ballotId}-${item}-${idx}`}>
+                    <tr
+                      className={`border-b border-gray-100 dark:border-gray-800 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50 ${
+                        idx % 2 === 0 ? "bg-white dark:bg-gray-900" : "bg-gray-50/30 dark:bg-gray-800/30"
+                      }`}
+                    >
+                      <td className="px-4 py-3 text-gray-600 dark:text-gray-400 font-medium">{idx + 1}</td>
+                      <td className="px-4 py-3">
+                        <div className="min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="block text-gray-900 dark:text-gray-100 break-words flex-1">
+                              {ballot.itemDescriptions?.[idx] || (
+                                <span className="text-gray-400 dark:text-gray-500 italic">Untitled proposal</span>
+                              )}
+                            </span>
+                            {ballot.anchorHashes?.[idx] && ballot.anchorHashes[idx] ? (
+                              <Badge variant="outline" className="text-[10px] bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800 flex items-center gap-1">
+                                <Link2 className="h-3 w-3" />
+                                Anchor
+                              </Badge>
+                            ) : (
+                              <Badge variant="outline" className="text-[10px] text-gray-500 dark:text-gray-400">
+                                No anchor
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <Select
+                          value={choice}
+                          onValueChange={(newValue: string) => handleChoiceChange(idx, newValue)}
+                          disabled={updatingIdx === idx || isRemoving}
+                        >
+                          <SelectTrigger
+                            className={`w-full ${choiceColor} border font-medium text-sm ${
+                              updatingIdx === idx ? "opacity-50 cursor-not-allowed" : ""
+                            }`}
+                            disabled={updatingIdx === idx || isRemoving}
+                          >
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectGroup>
+                              <SelectItem value="Yes">
+                                <div className="flex items-center gap-2">
+                                  <CheckCircle2 className="h-4 w-4 text-green-600" />
+                                  Yes
+                                </div>
+                              </SelectItem>
+                              <SelectItem value="No">
+                                <div className="flex items-center gap-2">
+                                  <XCircle className="h-4 w-4 text-red-600" />
+                                  No
+                                </div>
+                              </SelectItem>
+                              <SelectItem value="Abstain">
+                                <div className="flex items-center gap-2">
+                                  <MinusCircle className="h-4 w-4 text-gray-600" />
+                                  Abstain
+                                </div>
+                              </SelectItem>
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </td>
+                      <td className="px-4 py-3 text-right">
+                        <div className="flex items-center justify-end gap-2">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 px-2 text-xs"
+                            onClick={() => setExpandedRationaleIdx(expandedRationaleIdx === idx ? null : idx)}
+                          >
+                            {expandedRationaleIdx === idx ? (
+                              <ChevronUp className="h-3 w-3" />
+                            ) : (
+                              <ChevronDown className="h-3 w-3" />
+                            )}
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="bg-white text-gray-700 hover:bg-red-50 hover:text-red-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-red-900/20 dark:hover:text-red-400 border border-gray-200 hover:border-red-300 dark:border-gray-700 dark:hover:border-red-500"
+                            disabled={isRemoving || updateChoiceMutation.isPending}
+                            onClick={() => requestDelete(idx)}
+                          >
+                            {removingIdx === idx ? (
+                              <Loader2 className="h-3 w-3 animate-spin" />
+                            ) : (
+                              <Trash2 className="h-3 w-3" />
+                            )}
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                    {expandedRationaleIdx === idx && (
+                      <tr className="bg-blue-50/30 dark:bg-blue-900/10">
+                        <td colSpan={4} className="px-4 py-4">
+                          <ProposalRationaleEditor
+                            idx={idx}
+                            rationaleState={rationaleStates[idx]}
+                            onStateChange={(updates) => setRationaleStates(prev => ({ ...prev, [idx]: { ...prev[idx]!, ...updates } }))}
+                            onUpload={() => uploadRationaleToIpfs(idx)}
+                            onLoadFromUrl={(url) => loadRationaleFromUrl(idx, url)}
+                            loading={rationaleStates[idx]?.loading || false}
+                          />
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Mobile Card View */}
+        <div className="block md:hidden space-y-3 p-4">
           {ballot.items.map((item: string, idx: number) => {
-            const isCurrent = !!currentProposalId && item === currentProposalId;
+            const choice = ballot.choices?.[idx] ?? "Abstain";
+            const ChoiceIcon = getChoiceIcon(choice);
+            const choiceColor = getChoiceColor(choice);
+            
             return (
-              <tr
-                key={item + (ballot.choices?.[idx] ?? "") + idx}
-                className={`border-b border-white/5 transition-colors ${
-                  isCurrent
-                    ? "bg-blue-900/60 hover:bg-blue-800/70 ring-1 ring-blue-400"
-                    : idx % 2 === 1
-                      ? "bg-black/20 hover:bg-white/10"
-                      : "bg-transparent hover:bg-white/10"
-                }`}
+              <div
+                key={`${ballotId}-${item}-${idx}`}
+                className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
               >
-                <td className="px-4 py-2">{idx + 1}</td>
-                <td className="px-4 py-2">
-                  {ballot.itemDescriptions?.[idx] || (
-                    <span className="text-gray-400">-</span>
-                  )}
-                </td>
-                <td className="px-2 py-2 text-right">
-                  <div className="inline-flex flex-col gap-1 items-end">
-                    <Select
-                      value={ballot.choices?.[idx] ?? "Abstain"}
-                      onValueChange={async (newValue: string) => {
-                        setUpdatingIdx(idx);
-                        try {
-                          await updateChoiceMutation.mutateAsync({
-                            ballotId,
-                            index: idx,
-                            choice: newValue,
-                          });
-                          await refetchBallots();
-                          onBallotChanged?.();
-                        } catch (error: unknown) {}
-                        setUpdatingIdx(null);
-                      }}
-                      disabled={updatingIdx === idx}
-                    >
+                <div className="flex items-start justify-between gap-2 mb-3">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="text-xs font-medium text-gray-500 dark:text-gray-400">#{idx + 1}</span>
+                      {ballot.anchorHashes?.[idx] && ballot.anchorHashes[idx] ? (
+                        <Badge variant="outline" className="text-[10px] bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800 flex items-center gap-1">
+                          <Link2 className="h-3 w-3" />
+                          Anchor
+                        </Badge>
+                      ) : (
+                        <Badge variant="outline" className="text-[10px] text-gray-500 dark:text-gray-400">
+                          No anchor
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                      {ballot.itemDescriptions?.[idx] || (
+                        <span className="text-gray-400 dark:text-gray-500 italic">Untitled proposal</span>
+                      )}
+                    </p>
+                  </div>
+                </div>
+                {expandedRationaleIdx === idx && (
+                  <div className="mt-3">
+                    <ProposalRationaleEditor
+                      idx={idx}
+                      rationaleState={rationaleStates[idx]}
+                      onStateChange={(updates) => setRationaleStates(prev => ({ ...prev, [idx]: { ...prev[idx]!, ...updates } }))}
+                      onUpload={() => uploadRationaleToIpfs(idx)}
+                      onLoadFromUrl={(url) => loadRationaleFromUrl(idx, url)}
+                      loading={rationaleStates[idx]?.loading || false}
+                    />
+                  </div>
+                )}
+                <div className="flex items-center gap-2 mt-3">
+                  <Select
+                    value={choice}
+                    onValueChange={(newValue: string) => handleChoiceChange(idx, newValue)}
+                    disabled={updatingIdx === idx || isRemoving}
+                  >
                     <SelectTrigger
-                      className="w-28 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/40 dark:bg-white/5 dark:hover:bg-white/10 dark:hover:border-white/40 text-center justify-center"
-                      disabled={updatingIdx === idx}
-                    >
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          <SelectItem value="Yes">Yes</SelectItem>
-                          <SelectItem value="No">No</SelectItem>
-                          <SelectItem value="Abstain">Abstain</SelectItem>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="w-28 bg-white/80 text-gray-700 hover:bg-white hover:text-red-600 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-red-400 border border-gray-200 hover:border-red-400 dark:border-white/10 dark:hover:border-red-500"
-                      disabled={
-                        removingIdx === idx || updateChoiceMutation.isPending
-                      }
-                      onClick={() => handleDelete(idx)}
+                      className={`flex-1 ${choiceColor} border font-medium text-sm ${
+                        updatingIdx === idx ? "opacity-50 cursor-not-allowed" : ""
+                      }`}
+                      disabled={updatingIdx === idx || isRemoving}
                     >
-                      {removingIdx === idx ? "..." : "Delete"}
-                    </Button>
-                  </div>
-                </td>
-              </tr>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="Yes">
+                          <div className="flex items-center gap-2">
+                            <CheckCircle2 className="h-4 w-4 text-green-600" />
+                            Yes
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="No">
+                          <div className="flex items-center gap-2">
+                            <XCircle className="h-4 w-4 text-red-600" />
+                            No
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="Abstain">
+                          <div className="flex items-center gap-2">
+                            <MinusCircle className="h-4 w-4 text-gray-600" />
+                            Abstain
+                          </div>
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-7 px-2"
+                    onClick={() => setExpandedRationaleIdx(expandedRationaleIdx === idx ? null : idx)}
+                  >
+                    {expandedRationaleIdx === idx ? (
+                      <ChevronUp className="h-4 w-4" />
+                    ) : (
+                      <ChevronDown className="h-4 w-4" />
+                    )}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="bg-white text-gray-700 hover:bg-red-50 hover:text-red-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-red-900/20 dark:hover:text-red-400 border border-gray-200 hover:border-red-300 dark:border-gray-700 dark:hover:border-red-500"
+                    disabled={isRemoving || updateChoiceMutation.isPending}
+                    onClick={() => requestDelete(idx)}
+                  >
+                    {removingIdx === idx ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <Trash2 className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
             );
           })}
-        </tbody>
-      </table>
-    </div>
+        </div>
+      </div>
+
+      {/* Confirmation dialog for removing proposal */}
+      <Dialog
+        open={deleteProposalIdx !== null}
+        onOpenChange={(open) => {
+          if (!open) cancelDelete();
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Remove Proposal from Ballot?</DialogTitle>
+            <DialogDescription>
+              {deleteProposalIdx !== null && (
+                <span>
+                  Are you sure you want to remove "{ballot.itemDescriptions?.[deleteProposalIdx] || 'this proposal'}" from this ballot? 
+                  You can add it back later if needed.
+                </span>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="mt-4 flex justify-end gap-2">
+            <Button
+              variant="outline"
+              className="border border-gray-300 hover:border-gray-400 dark:border-slate-600 dark:hover:border-slate-400"
+              onClick={cancelDelete}
+              disabled={isRemoving}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={async () => {
+                if (deleteProposalIdx === null) return;
+                const idxToDelete = deleteProposalIdx;
+                cancelDelete(); // Close dialog immediately
+                await handleDelete(idxToDelete);
+              }}
+              disabled={isRemoving}
+              className="bg-red-600 hover:bg-red-700 text-white border border-red-500 hover:border-red-300"
+            >
+              {isRemoving ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Removing...
+                </>
+              ) : (
+                <>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Remove
+                </>
+              )}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
diff --git a/src/components/pages/wallet/governance/card-info.tsx b/src/components/pages/wallet/governance/card-info.tsx
index 7cc22869..253c7db8 100644
--- a/src/components/pages/wallet/governance/card-info.tsx
+++ b/src/components/pages/wallet/governance/card-info.tsx
@@ -8,7 +8,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { MoreVertical, Info, ExternalLink, Copy, X, UserCheck, CheckCircle, Hash, Activity, TrendingUp } from "lucide-react";
+import { MoreVertical, Info, ExternalLink, Copy, X, UserCheck, CheckCircle, Hash, Activity, TrendingUp, ChevronDown, ChevronUp, UserPlus, Edit, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
 import { useToast } from "@/hooks/use-toast";
@@ -26,6 +26,11 @@ import {
 } from "@/components/ui/tooltip";
 import { getTxBuilder } from "@/utils/get-tx-builder";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 
 export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet; manualUtxos: UTxO[] }) {
   const drepInfo = useWalletsStore((state) => state.drepInfo);
@@ -56,47 +61,55 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
   // Fetch proxy DRep info when proxy is enabled and selected
   useEffect(() => {
     const fetchProxyDrepInfo = async () => {
-      
-      
       // Only fetch proxy DRep info if proxy is enabled, has a selected proxy, proxies exist, and the selected proxy is found
       const hasValidProxy = isProxyEnabled && selectedProxyId && proxies.length > 0;
       const selectedProxy = hasValidProxy ? proxies.find(p => p.id === selectedProxyId) : null;
       
-      if (hasValidProxy && selectedProxy && appWallet?.scriptCbor) {
-        setLoadingProxyDrep(true);
+      if (!hasValidProxy || !selectedProxy || !appWallet?.scriptCbor) {
+        // Clear proxy state when no valid proxy is available - fall back to old logic
+        setProxyDrepId(null);
+        setProxyDrepInfo(null);
         setProxyDrepError(null);
+        setProxyDelegatorsInfo(null);
+        return;
+      }
+
+      setLoadingProxyDrep(true);
+      setProxyDrepError(null);
+      
+      // Set a timeout to prevent infinite loading
+      const timeoutId = setTimeout(() => {
+        setLoadingProxyDrep(false);
+        setProxyDrepError("Timeout: Could not fetch proxy DRep information");
+      }, 10000); // 10 second timeout
+      
+      try {
+        const txBuilder = getTxBuilder(network);
+        const proxyContract = new MeshProxyContract(
+          {
+            mesh: txBuilder,
+            wallet: undefined,
+            networkId: network,
+          },
+          {
+            paramUtxo: JSON.parse(selectedProxy.paramUtxo || '{}'),
+          },
+          appWallet.scriptCbor,
+        );
+        proxyContract.proxyAddress = selectedProxy.proxyAddress;
         
-        // Set a timeout to prevent infinite loading
-        const timeoutId = setTimeout(() => {
-          setLoadingProxyDrep(false);
-          setProxyDrepError("Timeout: Could not fetch proxy DRep information");
-        }, 10000); // 10 second timeout
+        // Get DRep ID
+        const drepId = proxyContract.getDrepId();
         
-        try {
-          const txBuilder = getTxBuilder(network);
-          const proxyContract = new MeshProxyContract(
-            {
-              mesh: txBuilder,
-              wallet: undefined,
-              networkId: network,
-            },
-            {
-              paramUtxo: JSON.parse(selectedProxy.paramUtxo || '{}'),
-            },
-            appWallet.scriptCbor,
-          );
-          proxyContract.proxyAddress = selectedProxy.proxyAddress;
-          
-          // Get DRep ID
-          const drepId = proxyContract.getDrepId();
-          
-          setProxyDrepId(drepId);
-          
-          // Get DRep status (now with caching and proper error handling)
-          const status = await proxyContract.getDrepStatus(true);
-          setProxyDrepInfo(status);
+        setProxyDrepId(drepId);
+        
+        // Get DRep status (now with caching and proper error handling)
+        const status = await proxyContract.getDrepStatus(true);
+        setProxyDrepInfo(status);
 
-          // Get DRep delegators (force refresh on manual view)
+        // Get DRep delegators only if DRep is registered (force refresh on manual view)
+        // getDrepDelegators now checks registration status internally, but we can skip if status is null
+        if (status && status !== null) {
           try {
             const delegators = await proxyContract.getDrepDelegators(true);
             setProxyDelegatorsInfo(delegators as {
@@ -106,28 +119,36 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
               count: number;
             });
           } catch {
-            // ignore, leave as null
-            setProxyDelegatorsInfo(null);
+            // If delegators fetch fails, set empty result
+            setProxyDelegatorsInfo({
+              delegators: [],
+              totalDelegation: "0",
+              totalDelegationADA: 0,
+              count: 0
+            });
           }
-          
-          clearTimeout(timeoutId);
-        } catch (error) {
-          // Only log unexpected errors, not 404s which are handled in offchain
-          console.error("Unexpected error in fetchProxyDrepInfo:", error);
-          setProxyDrepError("Failed to fetch proxy DRep information");
-          clearTimeout(timeoutId);
-        } finally {
-          setLoadingProxyDrep(false);
+        } else {
+          // DRep not registered, set empty delegators info
+          setProxyDelegatorsInfo({
+            delegators: [],
+            totalDelegation: "0",
+            totalDelegationADA: 0,
+            count: 0
+          });
         }
-      } else {
-        // Clear proxy state when no valid proxy is available - fall back to old logic
-        setProxyDrepId(null);
-        setProxyDrepInfo(null);
-        setProxyDrepError(null);
-        setProxyDelegatorsInfo(null);
+        
+        clearTimeout(timeoutId);
+      } catch (error) {
+        // Only log unexpected errors, not 404s which are handled in offchain
+        console.error("Unexpected error in fetchProxyDrepInfo:", error);
+        setProxyDrepError("Failed to fetch proxy DRep information");
+        clearTimeout(timeoutId);
+      } finally {
+        setLoadingProxyDrep(false);
       }
     };
     
+    
     fetchProxyDrepInfo();
   }, [isProxyEnabled, selectedProxyId, appWallet?.scriptCbor, network, proxies]);
   
@@ -191,19 +212,29 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
   
   // Check if DRep is actually registered (has info from Blockfrost)
   const isDRepRegistered = displayDrepInfo?.active === true;
+  const [isDRepManagementOpen, setIsDRepManagementOpen] = useState(false);
+  const [showProxySelector, setShowProxySelector] = useState(!!selectedProxyId);
+  
+  // Sync showProxySelector when a proxy is selected
+  useEffect(() => {
+    if (selectedProxyId) {
+      setShowProxySelector(true);
+    }
+  }, [selectedProxyId]);
+  
   return (
     <div className="w-full">
       {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-3">
-          <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
-            <Info className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4 sm:mb-6">
+        <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+          <div className="p-1.5 sm:p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex-shrink-0">
+            <Info className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600 dark:text-blue-400" />
           </div>
-          <div>
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+          <div className="min-w-0 flex-1">
+            <h2 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">
               {hasValidProxyData ? "Proxy DRep Information" : "DRep Information"}
             </h2>
-            <p className="text-sm text-gray-500 dark:text-gray-400">
+            <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
               Note: governance features are currently in alpha as Blockfrost and CIPs standards are work in progress.
             </p>
           </div>
@@ -211,7 +242,7 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
         
         <DropdownMenu>
           <DropdownMenuTrigger
-            className="p-2 rounded-md hover:bg-zinc-100 focus:bg-zinc-100 dark:hover:bg-zinc-800 dark:focus:bg-zinc-800"
+            className="p-2 rounded-md hover:bg-zinc-100 focus:bg-zinc-100 dark:hover:bg-zinc-800 dark:focus:bg-zinc-800 flex-shrink-0"
             aria-haspopup="true"
           >
             <MoreVertical className="h-4 w-4" />
@@ -231,72 +262,94 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
         </DropdownMenu>
       </div>
 
-      {/* Minimal DRep & Proxy Management Card */}
+      {/* Combined DRep Card with Collapsible Management */}
       <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
         {/* Header */}
-        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <Info className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-              <div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
-                  {hasValidProxyData ? "Proxy DRep Management" : "DRep Information"}
-                </h3>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  {hasValidProxyData ? "Using proxy for governance operations" : "Standard DRep governance mode"}
-                </p>
-              </div>
+        <div className="px-3 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <Info className="h-4 w-4 sm:h-5 sm:w-5 text-gray-600 dark:text-gray-400 flex-shrink-0" />
+            <div className="min-w-0 flex-1">
+              <h3 className="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100">
+                {hasValidProxyData ? "Proxy DRep Information" : "DRep Information"}
+              </h3>
+              <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
+                {hasValidProxyData ? "Using proxy for governance operations" : "Standard DRep governance mode"}
+              </p>
             </div>
-            <div className="flex items-center gap-2">
-              {/* Global Proxy Toggle - Only show when proxies exist */}
-              {proxies && proxies.length > 0 && (
-                <>
+          </div>
+          
+          {/* Improved Proxy Control - Only show when proxies exist */}
+          {proxies && proxies.length > 0 && (
+            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+              <div className="flex flex-col gap-3">
+                {/* Toggle Row */}
+                <div className="flex items-center justify-between gap-3">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-gray-600 dark:text-gray-400">Proxy Mode:</span>
-                    <button
-                      onClick={() => {
-                        if (isProxyEnabled) {
-                          clearSelectedProxy();
-                          toast({
-                            title: "Proxy Mode Disabled",
-                            description: "Proxy mode has been turned off.",
-                          });
-                        } else {
-                          toast({
-                            title: "Proxy Mode Enabled",
-                            description: "Select a proxy to use for governance operations.",
-                          });
-                        }
-                      }}
-                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                        isProxyEnabled ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'
+                    <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Proxy Mode</span>
+                    {isProxyEnabled && selectedProxyId && (
+                      <span className="text-xs px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
+                        Active
+                      </span>
+                    )}
+                  </div>
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (isProxyEnabled && selectedProxyId) {
+                        // Turn OFF: clear selection and hide selector
+                        clearSelectedProxy();
+                        setShowProxySelector(false);
+                        toast({
+                          title: "Proxy Mode Disabled",
+                          description: "Switched to standard DRep mode.",
+                        });
+                      } else {
+                        // Turn ON: show selector so user can choose a proxy
+                        setShowProxySelector(true);
+                      }
+                    }}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+                      isProxyEnabled && selectedProxyId ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'
+                    }`}
+                    type="button"
+                    aria-label={isProxyEnabled && selectedProxyId ? "Disable proxy mode" : "Enable proxy mode"}
+                  >
+                    <span
+                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
+                        isProxyEnabled && selectedProxyId ? 'translate-x-6' : 'translate-x-1'
                       }`}
+                    />
+                  </button>
+                </div>
+                
+                {/* Proxy Selector - Show when toggle is ON or when a proxy is selected */}
+                {(showProxySelector || isProxyEnabled || selectedProxyId) && (
+                  <div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-2 duration-200">
+                    <Select 
+                      value={selectedProxyId || undefined} 
+                      onValueChange={(value) => {
+                        setSelectedProxy(value);
+                        setShowProxySelector(true);
+                        toast({
+                          title: "Proxy Selected",
+                          description: "Proxy mode is now active for governance operations.",
+                        });
+                      }}
                     >
-                      <span
-                        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                          isProxyEnabled ? 'translate-x-6' : 'translate-x-1'
-                        }`}
-                      />
-                    </button>
-                  </div>
-                  
-                  <div className="flex items-center gap-2">
-                    <Select value={selectedProxyId || undefined} onValueChange={(value) => {
-                      setSelectedProxy(value);
-                      toast({
-                        title: "Proxy Selected",
-                        description: "Proxy mode enabled for governance operations.",
-                      });
-                    }}>
-                      <SelectTrigger className="w-48">
-                        <SelectValue placeholder="Select a proxy..." />
+                      <SelectTrigger className="w-full text-xs sm:text-sm h-9">
+                        <SelectValue placeholder="Choose a proxy contract..." />
                       </SelectTrigger>
                       <SelectContent>
                         {proxies.map((proxy) => (
                           <SelectItem key={proxy.id} value={proxy.id}>
-                            <div className="flex flex-col">
-                              <span className="font-medium">{proxy.description || `Proxy ${proxy.id.slice(-8)}`}</span>
-                              <span className="text-xs text-gray-500">{proxy.proxyAddress.slice(0, 20)}...</span>
+                            <div className="flex flex-col gap-0.5">
+                              <span className="font-medium text-xs sm:text-sm">
+                                {proxy.description || `Proxy ${proxy.id.slice(-8)}`}
+                              </span>
+                              <span className="text-xs text-gray-500 font-mono">
+                                {proxy.proxyAddress.slice(0, 24)}...
+                              </span>
                             </div>
                           </SelectItem>
                         ))}
@@ -304,33 +357,42 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
                     </Select>
                     {selectedProxyId && (
                       <Button
-                        variant="outline"
+                        variant="ghost"
                         size="sm"
-                        onClick={() => {
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
                           clearSelectedProxy();
+                          setShowProxySelector(false);
                           toast({
-                            title: "Proxy Unselected",
-                            description: "Proxy mode has been disabled. Using standard DRep mode.",
+                            title: "Proxy Cleared",
+                            description: "Switched to standard DRep mode.",
                           });
                         }}
-                        className="text-gray-600 hover:text-gray-700"
+                        className="h-9 w-9 p-0 flex-shrink-0 hover:bg-red-50 dark:hover:bg-red-900/20"
+                        type="button"
+                        aria-label="Clear proxy selection"
                       >
-                        <X className="h-4 w-4" />
+                        <X className="h-4 w-4 text-gray-500 hover:text-red-600 dark:hover:text-red-400" />
                       </Button>
                     )}
                   </div>
-                </>
-              )}
+                )}
+                
+                {/* Helper Text */}
+                {!showProxySelector && !isProxyEnabled && !selectedProxyId && (
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    Enable proxy mode to use a proxy contract for governance operations.
+                  </p>
+                )}
+              </div>
             </div>
-          </div>
+          )}
         </div>
 
-        {/* Content */}
-        <div className="p-6 space-y-4">
-
-
-          {/* DRep Information - Single Row */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* DRep Information Content */}
+        <div className="p-3 sm:p-6 space-y-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
             {/* DRep ID */}
             <div className="space-y-2">
               <div className="flex items-center gap-2">
@@ -422,35 +484,73 @@ export default function CardInfo({ appWallet, manualUtxos }: { appWallet: Wallet
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Actions */}
-      <div className="mt-6 flex flex-wrap gap-3">
-        <Button 
-          className="flex-1 sm:flex-initial" 
-          disabled={isDRepRegistered}
-          variant={isDRepRegistered ? "outline" : "default"}
-        >
-          <Link href={`/wallets/${appWallet.id}/governance/register`}>
-            Register DRep
-          </Link>
-        </Button>
-        <Button 
-          className="flex-1 sm:flex-initial" 
-          disabled={!isDRepRegistered}
-          variant={!isDRepRegistered ? "outline" : "default"}
-        >
-          <Link href={`/wallets/${appWallet.id}/governance/update`}>
-            Update DRep
-          </Link>
-        </Button>
-        <Retire appWallet={appWallet} manualUtxos={manualUtxos} />
-        <Link href={`/wallets/${appWallet.id}/governance/drep`}>
-          <Button className="flex-1 sm:flex-initial" variant="outline">
-            Find a DRep
-          </Button>
-        </Link>
+        {/* Collapsible DRep Management Section */}
+        <Collapsible open={isDRepManagementOpen} onOpenChange={setIsDRepManagementOpen}>
+          <div className="border-t border-gray-200 dark:border-gray-700">
+            <CollapsibleTrigger className="w-full">
+              <div className="flex items-center justify-between px-4 sm:px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
+                    <Activity className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600 dark:text-blue-400" />
+                  </div>
+                  <h3 className="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100">
+                    DRep Management
+                  </h3>
+                </div>
+                {isDRepManagementOpen ? (
+                  <ChevronUp className="h-4 w-4 sm:h-5 sm:w-5 text-gray-500 dark:text-gray-400" />
+                ) : (
+                  <ChevronDown className="h-4 w-4 sm:h-5 sm:w-5 text-gray-500 dark:text-gray-400" />
+                )}
+              </div>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="px-4 sm:px-6 pb-4 sm:pb-6">
+                <div className="space-y-3">
+                  {/* Primary Actions - Registration & Update */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    <Button 
+                      className="w-full justify-start gap-3 h-auto py-3.5 px-4 text-sm sm:text-base font-medium" 
+                      disabled={isDRepRegistered}
+                      variant={isDRepRegistered ? "outline" : "default"}
+                    >
+                      <UserPlus className="h-5 w-5 flex-shrink-0" />
+                      <Link href={`/wallets/${appWallet.id}/governance/register`} className="flex-1 text-left">
+                        Register DRep
+                      </Link>
+                    </Button>
+                    <Button 
+                      className="w-full justify-start gap-3 h-auto py-3.5 px-4 text-sm sm:text-base font-medium" 
+                      disabled={!isDRepRegistered}
+                      variant={!isDRepRegistered ? "outline" : "default"}
+                    >
+                      <Edit className="h-5 w-5 flex-shrink-0" />
+                      <Link href={`/wallets/${appWallet.id}/governance/update`} className="flex-1 text-left">
+                        Update DRep
+                      </Link>
+                    </Button>
+                  </div>
+                  
+                  {/* Secondary Actions - Retire & Find */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    <div className="w-full">
+                      <Retire appWallet={appWallet} manualUtxos={manualUtxos} />
+                    </div>
+                    <Link href={`/wallets/${appWallet.id}/governance/drep`} className="w-full">
+                      <Button className="w-full justify-start gap-3 h-auto py-3.5 px-4 text-sm sm:text-base font-medium" variant="outline">
+                        <Search className="h-5 w-5 flex-shrink-0" />
+                        Find a DRep
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </CollapsibleContent>
+          </div>
+        </Collapsible>
       </div>
     </div>
   );
 }
+
diff --git a/src/components/pages/wallet/governance/clarity/card-clarity.tsx b/src/components/pages/wallet/governance/clarity/card-clarity.tsx
index c25ead36..002a3e60 100644
--- a/src/components/pages/wallet/governance/clarity/card-clarity.tsx
+++ b/src/components/pages/wallet/governance/clarity/card-clarity.tsx
@@ -50,19 +50,20 @@ export default function ClarityCard({ appWallet }: ClarityCardProps) {
 
   return (
     <CardUI title="Clarity Governance" cardClassName="col-span-2">
-      <div className="flex flex-col space-y-4 p-2">
+      <div className="flex flex-col space-y-3 sm:space-y-4 p-2 sm:p-4">
         {appWallet.clarityApiKey ? (
-          <div className="flex flex-col space-y-4">
+          <div className="flex flex-col space-y-3 sm:space-y-4">
             <div className="flex items-center space-x-2">
-              <span className="font-medium">Clarity API:</span>
-              <CheckCircleIcon className="h-5 w-5 text-green-500" />
-              <span>Connected</span>
+              <span className="font-medium text-sm sm:text-base">Clarity API:</span>
+              <CheckCircleIcon className="h-4 w-4 sm:h-5 sm:w-5 text-green-500 flex-shrink-0" />
+              <span className="text-sm sm:text-base">Connected</span>
             </div>
-            <div className="flex items-center space-x-2">
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2">
               <Link
                 href={`/wallets/${appWallet.id}/governance/clarity/create-action`}
+                className="flex-1 sm:flex-initial"
               >
-                <Button>
+                <Button className="w-full sm:w-auto text-sm sm:text-base">
                   <PlusIcon className="mr-2 h-4 w-4" /> New Governance Action
                 </Button>
               </Link>
@@ -70,43 +71,48 @@ export default function ClarityCard({ appWallet }: ClarityCardProps) {
                 variant="outline"
                 onClick={() => setIsEditing(true)}
                 disabled={isSaving}
+                className="w-full sm:w-auto text-sm sm:text-base"
               >
                 Update Clarity API Key
               </Button>
             </div>
           </div>
         ) : isEditing ? (
-          <div className="flex flex-col space-y-2">
-            <label htmlFor="clarityApiKey" className="text-sm font-medium">
+          <div className="flex flex-col space-y-3 sm:space-y-4">
+            <label htmlFor="clarityApiKey" className="text-xs sm:text-sm font-medium">
               Enter your Clarity API Key found on the Admin Page of your
               Organization on Clarity:
             </label>
-            <div className="flex items-center space-x-2">
+            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
               <Input
                 id="clarityApiKey"
                 value={newApiKey}
                 onChange={(e) => setNewApiKey(e.target.value)}
                 placeholder="Enter Clarity API Key"
-                className="flex-1"
+                className="flex-1 text-sm sm:text-base"
               />
-              <Button
-                onClick={handleSave}
-                disabled={!newApiKey.trim() || isSaving}
-              >
-                Save
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => setIsEditing(false)}
-                disabled={isSaving}
-              >
-                Cancel
-              </Button>
+              <div className="flex gap-2">
+                <Button
+                  onClick={handleSave}
+                  disabled={!newApiKey.trim() || isSaving}
+                  className="flex-1 sm:flex-initial text-sm sm:text-base"
+                >
+                  Save
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => setIsEditing(false)}
+                  disabled={isSaving}
+                  className="flex-1 sm:flex-initial text-sm sm:text-base"
+                >
+                  Cancel
+                </Button>
+              </div>
             </div>
           </div>
         ) : (
-          <div className="flex flex-col space-y-2">
-            <p className="text-sm text-gray-500">
+          <div className="flex flex-col space-y-3 sm:space-y-4">
+            <p className="text-xs sm:text-sm text-gray-500">
               No Clarity API Key associated with this wallet.
             </p>
             <div>
@@ -114,6 +120,7 @@ export default function ClarityCard({ appWallet }: ClarityCardProps) {
                 variant="outline"
                 onClick={() => setIsEditing(true)}
                 disabled={isSaving}
+                className="w-full sm:w-auto text-sm sm:text-base"
               >
                 <Link2Icon className="mr-2 h-4 w-4" /> Link Clarity API Key
               </Button>
diff --git a/src/components/pages/wallet/governance/drep/drepForm.tsx b/src/components/pages/wallet/governance/drep/drepForm.tsx
index 65636a40..63995647 100644
--- a/src/components/pages/wallet/governance/drep/drepForm.tsx
+++ b/src/components/pages/wallet/governance/drep/drepForm.tsx
@@ -104,116 +104,138 @@ export default function DRepForm({
   }
 
   return (
-    <div className="flex flex-col gap-4">
-      <p>
+    <div className="flex flex-col gap-3 sm:gap-4">
+      <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
         A DRep is expected to actively participate in governance and act as a
         representative of other Cardano members. Becoming a DRep requires a
         refundable deposit of ₳500.{" "}
         <Link
           href="https://docs.gov.tools/about/what-is-cardano-govtool/govtool-functions/dreps"
           passHref
+          className="text-blue-600 dark:text-blue-400 hover:underline"
         >
           Learn more
         </Link>
         .
       </p>
 
-      <fieldset className="grid gap-6">
-        <div className="grid gap-3">
-          <Label>DRep Name</Label>
+      <fieldset className="grid gap-4 sm:gap-6">
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">DRep Name</Label>
           <Input
             placeholder="name must be without spaces"
             value={givenName}
             onChange={(e) => setGivenName(e.target.value)}
+            className="text-sm sm:text-base"
           />
         </div>
 
-        <div className="grid gap-3">
-          <Label>Bio</Label>
-          <Textarea value={bio} onChange={(e) => setBio(e.target.value)} />
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Bio</Label>
+          <Textarea 
+            value={bio} 
+            onChange={(e) => setBio(e.target.value)}
+            className="text-sm sm:text-base min-h-[80px] sm:min-h-[100px]"
+          />
         </div>
 
-        <div className="grid gap-3">
-          <Label>Email</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Email</Label>
           <Input
             type="email"
             placeholder="Enter your email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
+            className="text-sm sm:text-base"
           />
         </div>
 
-        <div className="grid gap-3">
-          <Label>Upload Image</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Upload Image</Label>
           <ImgDragAndDrop onImageUpload={handleImageUpload} />
         </div>
 
-        <div className="grid gap-3">
-          <Label>Objectives</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Objectives</Label>
           <Textarea
             value={objectives}
             onChange={(e) => setObjectives(e.target.value)}
+            className="text-sm sm:text-base min-h-[80px] sm:min-h-[100px]"
           />
         </div>
 
-        <div className="grid gap-3">
-          <Label>Motivations</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Motivations</Label>
           <Textarea
             value={motivations}
             onChange={(e) => setMotivations(e.target.value)}
+            className="text-sm sm:text-base min-h-[80px] sm:min-h-[100px]"
           />
         </div>
 
-        <div className="grid gap-3">
-          <Label>Qualifications</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Qualifications</Label>
           <Textarea
             value={qualifications}
             onChange={(e) => setQualifications(e.target.value)}
+            className="text-sm sm:text-base min-h-[80px] sm:min-h-[100px]"
           />
         </div>
 
-        <div className="grid gap-3">
-          <Label>Links</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Links</Label>
           {localLinks.map((link, index) => (
             <div key={index} className="flex gap-2">
               <Input
                 value={link}
                 onChange={(e) => updateLink(index, e.target.value)}
                 placeholder="https://path/to/info"
+                className="text-sm sm:text-base flex-1"
               />
               <Button
                 onClick={() => removeLink(index)}
                 size="icon"
                 variant="destructive"
+                className="flex-shrink-0 h-10 w-10 sm:h-11 sm:w-11"
               >
-                X
+                <span className="text-sm sm:text-base">×</span>
               </Button>
             </div>
           ))}
-          <Button onClick={addLink} variant="secondary">
+          <Button 
+            onClick={addLink} 
+            variant="secondary"
+            className="w-full sm:w-auto text-sm sm:text-base"
+          >
             + Add Link
           </Button>
         </div>
 
-        <div className="grid gap-3">
-          <Label>Identities</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label className="text-sm sm:text-base">Identities</Label>
           {localIdentities.map((identity, index) => (
             <div key={index} className="flex gap-2">
               <Input
                 value={identity}
                 onChange={(e) => updateIdentity(index, e.target.value)}
                 placeholder="https://path/to/identity"
+                className="text-sm sm:text-base flex-1"
               />
               <Button
                 onClick={() => removeIdentity(index)}
                 size="icon"
                 variant="destructive"
+                className="flex-shrink-0 h-10 w-10 sm:h-11 sm:w-11"
               >
-                X
+                <span className="text-sm sm:text-base">×</span>
               </Button>
             </div>
           ))}
-          <Button onClick={addIdentity} variant="secondary">
+          <Button 
+            onClick={addIdentity} 
+            variant="secondary"
+            className="w-full sm:w-auto text-sm sm:text-base"
+          >
             + Add Identity
           </Button>
         </div>
@@ -230,7 +252,7 @@ export default function DRepForm({
         />
       )}
 
-      <div className="space-y-2">
+      <div className="space-y-2 sm:space-y-3">
         <Button
           onClick={onSubmit}
           disabled={
@@ -240,17 +262,17 @@ export default function DRepForm({
             !objectives ||
             !qualifications
           }
-          className="w-full"
+          className="w-full text-sm sm:text-base py-2 sm:py-2.5"
         >
           {loading
             ? "Loading..."
             : mode === "register"
-            ? `Register DRep ${isProxyMode ? "(Proxy Mode)" : "(Standard Mode)"}`
-            : `Update DRep ${isProxyMode ? "(Proxy Mode)" : "(Standard Mode)"}`}
+            ? `Register DRep${isProxyMode ? " (Proxy)" : ""}`
+            : `Update DRep${isProxyMode ? " (Proxy)" : ""}`}
         </Button>
         {isProxyMode && (
-          <p className="text-xs text-muted-foreground text-center">
-            This will create a multisig transaction for proxy DRep registration
+          <p className="text-xs sm:text-sm text-muted-foreground text-center px-2">
+            This will create a multisig transaction for proxy DRep {mode === "register" ? "registration" : "update"}
           </p>
         )}
       </div>
diff --git a/src/components/pages/wallet/governance/drep/drepMetadata.tsx b/src/components/pages/wallet/governance/drep/drepMetadata.tsx
index d37d1b58..4137d3f6 100644
--- a/src/components/pages/wallet/governance/drep/drepMetadata.tsx
+++ b/src/components/pages/wallet/governance/drep/drepMetadata.tsx
@@ -1,6 +1,23 @@
 import jsonld from "jsonld";
 import type { JsonLdDocument, ContextDefinition } from "jsonld";
 
+// CIP-119 character limits
+const MAX_TEXT_LENGTH = 1000;
+
+// Valid reference types per CIP-119 schema
+const VALID_REFERENCE_TYPES = ["GovernanceMetadata", "Other", "Link", "Identity"] as const;
+
+// Helper function to truncate text to max length
+function truncateText(text: string, maxLength: number): string {
+  return text.length > maxLength ? text.slice(0, maxLength) : text;
+}
+
+// Return type for DRep metadata with both compacted and normalized forms
+export interface DRepMetadataResult {
+  compacted: Record<string, unknown>;
+  normalized: string; // Canonicalized N-Quads format for hashing
+}
+
 // Explicitly declare that this function returns a Promise containing a JSON‑LD document.
 // (You can adjust the return type if you have a more precise interface.)
 export async function getDRepMetadata(
@@ -16,7 +33,12 @@ export async function getDRepMetadata(
     identities: string[];
   },
   appWallet: { address: string }
-): Promise<Record<string, unknown>> {
+): Promise<DRepMetadataResult> {
+  // Validate and truncate text fields per CIP-119 requirements
+  const objectives = truncateText(formState.objectives, MAX_TEXT_LENGTH);
+  const motivations = truncateText(formState.motivations, MAX_TEXT_LENGTH);
+  const qualifications = truncateText(formState.qualifications, MAX_TEXT_LENGTH);
+
   // Build the raw JSON‑LD object
   const metadata = {
     "@context": {
@@ -62,6 +84,8 @@ export async function getDRepMetadata(
             "@id": "CIP119:image",
             "@context": {
               ImageObject: "https://schema.org/ImageObject",
+              contentUrl: "https://schema.org/contentUrl",
+              sha256: "https://schema.org/sha256",
             },
           },
           objectives: "CIP119:objectives",
@@ -92,24 +116,37 @@ export async function getDRepMetadata(
     body: {
       title: `${formState.givenName} - DRep`,
       abstract: formState.bio,
-      motivations: formState.motivations,
+      motivations: motivations,
       rationale: "",
       paymentAddress: appWallet.address,
       givenName: formState.givenName,
-      image: {
-        "@type": "ImageObject",
-        contentUrl: formState.imageUrl,
-        sha256: formState.imageSha256,
-      },
-      objectives: formState.objectives,
-      qualifications: formState.qualifications,
+      ...(formState.imageUrl && 
+          formState.imageSha256 && 
+          formState.imageUrl.trim() !== "" && 
+          formState.imageSha256.trim() !== "" ? {
+        image: {
+          "@type": "ImageObject",
+          contentUrl: formState.imageUrl.trim(),
+          sha256: formState.imageSha256.trim(),
+        }
+      } : {}),
+      objectives: objectives,
+      qualifications: qualifications,
       references: [
         ...formState.links
           .filter((link) => link.trim() !== "")
-          .map((link) => ({ "@type": "Link", label: link, uri: link })),
+          .map((link) => ({ 
+            "@type": "Link" as const, 
+            label: link, 
+            uri: link 
+          })),
         ...formState.identities
           .filter((id) => id.trim() !== "")
-          .map((id) => ({ "@type": "Identity", label: id, uri: id })),
+          .map((id) => ({ 
+            "@type": "Identity" as const, 
+            label: id, 
+            uri: id 
+          })),
       ],
       comment: formState.bio,
       externalUpdates: [],
@@ -126,10 +163,31 @@ export async function getDRepMetadata(
     ],
   };
 
-  // Instead of casting to any, we cast to the proper types.
+  // Expand first to ensure all properties are preserved, then compact
+  // This ensures that properties like contentUrl and sha256 are not lost
+  const expanded = await jsonld.expand(
+    metadata as unknown as JsonLdDocument
+  );
+
+  // Compact the JSON-LD document for readability
   const compacted = await jsonld.compact(
-    metadata as unknown as JsonLdDocument,
+    expanded as unknown as JsonLdDocument,
     metadata["@context"] as unknown as ContextDefinition
   );
-  return compacted;
+
+  // Normalize (canonicalize) the JSON-LD document per CIP-100/CIP-119
+  // This produces a canonical form that should be used for hashing
+  const normalized = await jsonld.normalize(
+    compacted as unknown as JsonLdDocument,
+    {
+      algorithm: "URDNA2015",
+      format: "application/n-quads",
+    }
+  );
+
+  // Return both the compacted (for upload) and normalized (for hashing) versions
+  return {
+    compacted,
+    normalized,
+  };
 }
\ No newline at end of file
diff --git a/src/components/pages/wallet/governance/drep/registerDrep.tsx b/src/components/pages/wallet/governance/drep/registerDrep.tsx
index 9522dbde..0f2ddf35 100644
--- a/src/components/pages/wallet/governance/drep/registerDrep.tsx
+++ b/src/components/pages/wallet/governance/drep/registerDrep.tsx
@@ -9,7 +9,7 @@ import { getDRepIds } from "@meshsdk/core-cst";
 import useTransaction from "@/hooks/useTransaction";
 import DRepForm from "./drepForm";
 import { getDRepMetadata } from "./drepMetadata";
-import { getFile, hashDrepAnchor } from "@meshsdk/core";
+import { hashDrepAnchor } from "@meshsdk/core";
 import type { UTxO } from "@meshsdk/core";
 import router from "next/router";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
@@ -82,13 +82,14 @@ export default function RegisterDRep() {
     if (!multisigWallet) {
       throw new Error("Multisig wallet not connected");
     }
-    // Cast metadata to a known record type
-    const drepMetadata = (await getDRepMetadata(
+    // Get metadata with both compacted (for upload) and normalized (for hashing) forms
+    const metadataResult = await getDRepMetadata(
       formState,
       appWallet,
-    )) as Record<string, unknown>;
-    console.log(drepMetadata);
-    const rawResponse = await fetch("/api/vercel-storage/put", {
+    );
+    
+    // Upload the compacted JSON-LD (readable format)
+    const rawResponse = await fetch("/api/pinata-storage/put", {
       method: "POST",
       headers: {
         Accept: "application/json",
@@ -96,15 +97,15 @@ export default function RegisterDRep() {
       },
       body: JSON.stringify({
         pathname: `drep/${formState.givenName}.jsonld`,
-        value: JSON.stringify(drepMetadata),
+        value: JSON.stringify(metadataResult.compacted, null, 2), // Pretty print for readability
       }),
     });
     const res = (await rawResponse.json()) as PutResponse;
     const anchorUrl = res.url;
-    // Await file retrieval
-    const fileContent = getFile(anchorUrl);
-    const anchorObj = JSON.parse(fileContent);
-    const anchorHash = hashDrepAnchor(anchorObj);
+    
+    // Compute hash from the canonicalized (normalized) form per CIP-100/CIP-119
+    // The normalized form is in N-Quads format which is the canonical representation
+    const anchorHash = hashDrepAnchor(metadataResult.compacted);
     return { anchorUrl, anchorHash };
   }
 
@@ -224,20 +225,22 @@ export default function RegisterDRep() {
   }
 
   return (
-    <div className="w-full max-w-4xl mx-auto">
-      <div className="mb-6">
-        <h1 className="text-2xl font-semibold flex items-center gap-2">
-          <Plus className="h-6 w-6" />
-          Register DRep
+    <div className="w-full max-w-4xl mx-auto px-3 sm:px-4 md:px-6">
+      <div className="mb-4 sm:mb-6">
+        <h1 className="text-xl sm:text-2xl font-semibold flex items-center gap-2">
+          <Plus className="h-5 w-5 sm:h-6 sm:w-6 flex-shrink-0" />
+          <span>Register DRep</span>
         </h1>
-        <div className="mt-4 space-y-3">
+        <div className="mt-3 sm:mt-4 space-y-2 sm:space-y-3">
           {/* Global Proxy Status - Only show when proxies exist */}
           {proxies && proxies.length > 0 && (
-            <div className="flex items-center space-x-2 p-3 rounded-lg border bg-muted/30">
-              <div className={`w-3 h-3 rounded-full ${isProxyEnabled ? 'bg-green-500' : 'bg-gray-400'}`} />
-              <span className="text-sm font-medium">
-                {isProxyEnabled ? 'Proxy Mode Enabled' : 'Standard Mode'}
-              </span>
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2 p-3 rounded-lg border bg-muted/30">
+              <div className="flex items-center gap-2">
+                <div className={`w-3 h-3 rounded-full flex-shrink-0 ${isProxyEnabled ? 'bg-green-500' : 'bg-gray-400'}`} />
+                <span className="text-xs sm:text-sm font-medium">
+                  {isProxyEnabled ? 'Proxy Mode Enabled' : 'Standard Mode'}
+                </span>
+              </div>
               <span className="text-xs text-muted-foreground">
                 {isProxyEnabled 
                   ? 'DRep will be registered using a proxy contract' 
@@ -249,22 +252,22 @@ export default function RegisterDRep() {
 
           {/* Proxy Configuration - Only show when proxies exist */}
           {isProxyEnabled && proxies && proxies.length > 0 && (
-            <div className="space-y-3 p-3 rounded-lg border bg-blue-50/50 dark:bg-blue-950/20">
-              <p className="text-sm text-muted-foreground">
+            <div className="space-y-2 sm:space-y-3 p-3 rounded-lg border bg-blue-50/50 dark:bg-blue-950/20">
+              <p className="text-xs sm:text-sm text-muted-foreground">
                 This will register the DRep using a proxy contract, allowing for more flexible governance control.
               </p>
               {proxies && proxies.length > 0 ? (
                 <div className="space-y-2">
-                  <Label htmlFor="proxy-select">Select Proxy</Label>
+                  <Label htmlFor="proxy-select" className="text-xs sm:text-sm">Select Proxy</Label>
                   <Select value={selectedProxyId} onValueChange={setSelectedProxy}>
-                    <SelectTrigger id="proxy-select">
+                    <SelectTrigger id="proxy-select" className="w-full text-sm sm:text-base">
                       <SelectValue placeholder="Choose a proxy..." />
                     </SelectTrigger>
                     <SelectContent>
                       {proxies.map((proxy: any) => (
                         <SelectItem key={proxy.id} value={proxy.id}>
                           <div className="flex flex-col">
-                            <span className="font-medium">
+                            <span className="font-medium text-xs sm:text-sm">
                               {proxy.description || `Proxy ${proxy.id.slice(0, 8)}...`}
                             </span>
                             <span className="text-xs text-muted-foreground">
@@ -277,7 +280,7 @@ export default function RegisterDRep() {
                   </Select>
                 </div>
               ) : (
-                <div className="text-sm text-muted-foreground">
+                <div className="text-xs sm:text-sm text-muted-foreground">
                   {proxiesLoading ? "Loading proxies..." : "No proxies available. Please create a proxy first."}
                 </div>
               )}
@@ -287,7 +290,7 @@ export default function RegisterDRep() {
           {/* Standard Mode Info */}
           {!isProxyEnabled && (
             <div className="p-3 rounded-lg border bg-gray-50/50 dark:bg-gray-950/20">
-              <p className="text-sm text-muted-foreground">
+              <p className="text-xs sm:text-sm text-muted-foreground">
                 DRep will be registered directly to your multisig wallet. 
                 To use proxy registration, enable proxy mode in the Proxy Control panel.
               </p>
diff --git a/src/components/pages/wallet/governance/drep/updateDrep.tsx b/src/components/pages/wallet/governance/drep/updateDrep.tsx
index 7904d9c2..c51cc8f1 100644
--- a/src/components/pages/wallet/governance/drep/updateDrep.tsx
+++ b/src/components/pages/wallet/governance/drep/updateDrep.tsx
@@ -9,7 +9,7 @@ import { getDRepIds } from "@meshsdk/core-cst";
 import useTransaction from "@/hooks/useTransaction";
 import DRepForm from "./drepForm";
 import { getDRepMetadata } from "./drepMetadata";
-import { getFile, hashDrepAnchor } from "@meshsdk/core";
+import { hashDrepAnchor } from "@meshsdk/core";
 import type { UTxO } from "@meshsdk/core";
 import router from "next/router";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
@@ -81,13 +81,14 @@ export default function UpdateDRep() {
     if (!multisigWallet) {
       throw new Error("Multisig wallet not connected");
     }
-    // Cast metadata to a known record type
-    const drepMetadata = (await getDRepMetadata(
+    // Get metadata with both compacted (for upload) and normalized (for hashing) forms
+    const metadataResult = await getDRepMetadata(
       formState,
       appWallet,
-    )) as Record<string, unknown>;
-    console.log(drepMetadata);
-    const rawResponse = await fetch("/api/vercel-storage/put", {
+    );
+    
+    // Upload the compacted JSON-LD (readable format)
+    const rawResponse = await fetch("/api/pinata-storage/put", {
       method: "POST",
       headers: {
         Accept: "application/json",
@@ -95,15 +96,15 @@ export default function UpdateDRep() {
       },
       body: JSON.stringify({
         pathname: `drep/${formState.givenName}.jsonld`,
-        value: JSON.stringify(drepMetadata),
+        value: JSON.stringify(metadataResult.compacted, null, 2), // Pretty print for readability
       }),
     });
     const res = (await rawResponse.json()) as PutResponse;
     const anchorUrl = res.url;
-    // Await file retrieval
-    const fileContent = getFile(anchorUrl);
-    const anchorObj = JSON.parse(fileContent);
-    const anchorHash = hashDrepAnchor(anchorObj);
+    
+    // Compute hash from the canonicalized (normalized) form per CIP-100/CIP-119
+    // The normalized form is in N-Quads format which is the canonical representation
+    const anchorHash = hashDrepAnchor(metadataResult.compacted);
     return { anchorUrl, anchorHash };
   }
 
@@ -229,11 +230,11 @@ export default function UpdateDRep() {
   }
 
   return (
-    <div className="w-full max-w-4xl mx-auto">
-      <div className="mb-6">
-        <h1 className="text-2xl font-semibold flex items-center gap-2">
-          <Minus className="h-6 w-6" />
-          Update DRep
+    <div className="w-full max-w-4xl mx-auto px-3 sm:px-4 md:px-6">
+      <div className="mb-4 sm:mb-6">
+        <h1 className="text-xl sm:text-2xl font-semibold flex items-center gap-2">
+          <Minus className="h-5 w-5 sm:h-6 sm:w-6 flex-shrink-0" />
+          <span>Update DRep</span>
         </h1>
       </div>
       {appWallet && (
diff --git a/src/components/pages/wallet/governance/index.tsx b/src/components/pages/wallet/governance/index.tsx
index 781a3ee0..5620c801 100644
--- a/src/components/pages/wallet/governance/index.tsx
+++ b/src/components/pages/wallet/governance/index.tsx
@@ -9,14 +9,18 @@ import UTxOSelector from "../new-transaction/utxoSelector";
 import type { UTxO } from "@meshsdk/core";
 import { useState } from "react";
 import { useBallot } from "@/hooks/useBallot";
-import FloatingBallotSidebar from "./ballot/FloatingBallotSidebar";
+import BallotModal from "./ballot/BallotModal";
+import { BallotModalProvider, useBallotModal } from "@/hooks/useBallotModal";
+import { Button } from "@/components/ui/button";
+import { Vote } from "lucide-react";
 
-export default function PageGovernance() {
+function PageGovernanceContent() {
   const { appWallet } = useAppWallet();
   const network = useSiteStore((state) => state.network);
   const [manualUtxos, setManualUtxos] = useState<UTxO[]>([]);
   const [manualSelected, setManualSelected] = useState(false);
   const [selectedBallotId, setSelectedBallotId] = useState<string | undefined>(undefined);
+  const { isOpen, closeModal, openModal, currentProposalId, currentProposalTitle } = useBallotModal();
 
   const { ballots } = useBallot(appWallet?.id);
   const selected = ballots?.find((b) => b.id === selectedBallotId);
@@ -29,55 +33,92 @@ export default function PageGovernance() {
 
   if (appWallet === undefined) return <></>;
   return (
-    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-      {/* Info section */}
-      <CardInfo appWallet={appWallet} manualUtxos={manualUtxos} />
-      
-      {/* Proposals section right under info */}
-      <AllProposals
-        appWallet={appWallet}
-        utxos={manualUtxos}
-        selectedBallotId={selectedBallotId}
-        onSelectBallot={setSelectedBallotId}
-      />
+    <>
+      <main className="flex flex-1 flex-col gap-4 p-3 sm:p-4 md:gap-6 lg:gap-8 lg:p-8 max-w-7xl mx-auto w-full">
+        {/* Info section */}
+        <CardInfo appWallet={appWallet} manualUtxos={manualUtxos} />
+        
+        {/* Proposals section right under info */}
+        <AllProposals
+          appWallet={appWallet}
+          utxos={manualUtxos}
+          selectedBallotId={selectedBallotId}
+          onSelectBallot={setSelectedBallotId}
+        />
+        
+        {/* Vote and Clarity cards */}
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
+          <VoteCard appWallet={appWallet} utxos={manualUtxos} selectedBallotId={selectedBallotId} />
+          <ClarityCard appWallet={appWallet} />
+        </div>
+        
+        {/* Bottom section with UTxO selector */}
+        <div className="flex flex-col gap-4">
+          {appWallet && (
+            <UTxOSelector
+              appWallet={appWallet}
+              network={network}
+              onSelectionChange={(utxos, manual) => {
+                setManualUtxos(utxos);
+                setManualSelected(manual);
+              }}
+            />
+          )}
+          {false && (
+            <VoteCC
+              manualUtxos={manualUtxos}
+              manualSelected={manualSelected}
+              appWallet={appWallet}
+              network={network}
+            />
+          )}
+        </div>
+      </main>
       
-      {/* Vote and Clarity cards */}
-      <div className="grid gap-4 md:grid-cols-2">
-        <VoteCard appWallet={appWallet} utxos={manualUtxos} selectedBallotId={selectedBallotId} />
-        <ClarityCard appWallet={appWallet} />
+      {/* Floating Manage Ballots button (glassmorphism) */}
+      <div className="fixed bottom-5 right-5 z-40">
+        <Button
+          onClick={openModal}
+          className="flex items-center gap-2 px-4 py-2.5 rounded-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-white/70 dark:border-slate-700/80 shadow-[0_12px_30px_rgba(0,0,0,0.18)] text-sm font-semibold text-slate-800 dark:text-slate-50 transition-all duration-150 hover:-translate-y-[1px] hover:shadow-[0_16px_40px_rgba(0,0,0,0.22)] hover:border-white/80 dark:hover:border-slate-600 hover:bg-white dark:hover:bg-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900"
+        >
+          <span className="flex items-center gap-2">
+            <span className="grid h-6 w-6 place-items-center rounded-full bg-blue-600 text-white shadow-inner shadow-blue-500/50 dark:bg-blue-500 dark:shadow-blue-400/60">
+              <Vote className="h-3.5 w-3.5" />
+            </span>
+            <span className="truncate">Manage Ballots</span>
+          </span>
+          {proposalCount > 0 && (
+            <span className="ml-1 text-xs font-bold text-slate-700 dark:text-slate-50 bg-slate-100/90 dark:bg-slate-800/90 px-2 py-0.5 rounded-full border border-slate-200/80 dark:border-slate-600">
+              {proposalCount}
+            </span>
+          )}
+        </Button>
       </div>
       
-      {/* Bottom section with UTxO selector */}
-      <div className="flex flex-col gap-4">
-        {appWallet && (
-          <UTxOSelector
-            appWallet={appWallet}
-            network={network}
-            onSelectionChange={(utxos, manual) => {
-              setManualUtxos(utxos);
-              setManualSelected(manual);
-            }}
-          />
-        )}
-        {false && (
-          <VoteCC
-            manualUtxos={manualUtxos}
-            manualSelected={manualSelected}
-            appWallet={appWallet}
-            network={network}
-          />
-        )}
-      </div>
-      {/* Floating Ballot Sidebar */}
-      <FloatingBallotSidebar
-        appWallet={appWallet}
-        selectedBallotId={selectedBallotId}
-        onSelectBallot={setSelectedBallotId}
-        ballotCount={ballots?.length ?? 0}
-        totalProposalCount={totalProposalCount}
-        proposalCount={proposalCount}
-        manualUtxos={manualUtxos}
-      />
-    </main>
+      {/* Ballot Modal */}
+      {appWallet && (
+        <BallotModal
+          appWallet={appWallet}
+          selectedBallotId={selectedBallotId}
+          onSelectBallot={setSelectedBallotId}
+          utxos={manualUtxos}
+          open={isOpen}
+          onOpenChange={closeModal}
+          currentProposalId={currentProposalId}
+          currentProposalTitle={currentProposalTitle}
+          onBallotChanged={() => {
+            // Refresh any necessary data
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+export default function PageGovernance() {
+  return (
+    <BallotModalProvider>
+      <PageGovernanceContent />
+    </BallotModalProvider>
   );
 }
diff --git a/src/components/pages/wallet/governance/proposal/index.tsx b/src/components/pages/wallet/governance/proposal/index.tsx
index c18c2c15..9da72793 100644
--- a/src/components/pages/wallet/governance/proposal/index.tsx
+++ b/src/components/pages/wallet/governance/proposal/index.tsx
@@ -2,7 +2,7 @@ import CardUI from "@/components/ui/card-content";
 import { getProvider } from "@/utils/get-provider";
 import RowLabelInfo from "@/components/common/row-label-info";
 import { useSiteStore } from "@/lib/zustand/site";
-import type { ProposalMetadata } from "@/types/governance";
+import type { ProposalMetadata, ProposalDetails, ProposalParameters, ProposalWithdrawal } from "@/types/governance";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import Button from "@/components/common/button";
@@ -10,20 +10,35 @@ import useAppWallet from "@/hooks/useAppWallet";
 import VoteCard from "../vote-card";
 import type { UTxO } from "@meshsdk/core";
 import UTxOSelector from "../../new-transaction/utxoSelector";
-import FloatingBallotSidebar from "../ballot/FloatingBallotSidebar";
+import BallotModal from "../ballot/BallotModal";
+import { useBallotModal, BallotModalProvider } from "@/hooks/useBallotModal";
 import { useBallot } from "@/hooks/useBallot";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from "remark-gfm";
+import { Badge } from "@/components/ui/badge";
+import { CheckCircle2, XCircle, Clock, Calendar, Coins, Hash, FileText, Wallet } from "lucide-react";
 
-export default function WalletGovernanceProposal({ id }: { id: string }) {
+function WalletGovernanceProposalContent({ id }: { id: string }) {
   const network = useSiteStore((state) => state.network);
   const [proposalMetadata, setProposalMetadata] = useState<
     ProposalMetadata | undefined
   >(undefined);
+  const [proposalDetails, setProposalDetails] = useState<
+    ProposalDetails | undefined
+  >(undefined);
+  const [proposalParameters, setProposalParameters] = useState<
+    ProposalParameters | undefined
+  >(undefined);
+  const [proposalWithdrawals, setProposalWithdrawals] = useState<
+    ProposalWithdrawal[] | undefined
+  >(undefined);
+  const [loadingDetails, setLoadingDetails] = useState(true);
   const { appWallet } = useAppWallet();
   const [manualUtxos, setManualUtxos] = useState<UTxO[]>([]);
   const [selectedBallotId, setSelectedBallotId] = useState<string | undefined>(
     undefined,
   );
-  const [isBallotSidebarOpen, setIsBallotSidebarOpen] = useState(false);
+  const { isOpen, closeModal, currentProposalId, currentProposalTitle } = useBallotModal();
 
   const { ballots } = useBallot(appWallet?.id);
   const selected = ballots?.find((b) => b.id === selectedBallotId);
@@ -36,41 +51,211 @@ export default function WalletGovernanceProposal({ id }: { id: string }) {
 
   useEffect(() => {
     const blockchainProvider = getProvider(network);
-    async function get() {
+    async function fetchProposalData() {
       const [txHash, certIndex] = id.split(":");
-      const proposalData = (await blockchainProvider.get(
-        `/governance/proposals/${txHash}/${certIndex}/metadata`,
-      )) as ProposalMetadata;
+      setLoadingDetails(true);
+      
+      try {
+        // Fetch metadata
+        const metadata = await blockchainProvider.get(
+          `/governance/proposals/${txHash}/${certIndex}/metadata`,
+        ) as ProposalMetadata;
+        setProposalMetadata(metadata);
+
+        // Fetch proposal details
+        try {
+          const details = await blockchainProvider.get(
+            `/governance/proposals/${txHash}/${certIndex}`,
+          ) as ProposalDetails;
+          setProposalDetails(details);
+
+          // Fetch parameters if it's a parameter update proposal
+          if (details.governance_type === "parameter_change" || details.governance_type === "info_action") {
+            try {
+              const params = await blockchainProvider.get(
+                `/governance/proposals/${txHash}/${certIndex}/parameters`,
+              ) as ProposalParameters;
+              setProposalParameters(params);
+            } catch (error: any) {
+              if (error?.status !== 404) {
+                console.error("Error fetching parameters:", error);
+              }
+            }
+          }
 
-      if (proposalData) {
-        setProposalMetadata(proposalData);
+          // Fetch withdrawals if it's a treasury withdrawal
+          if (details.governance_type === "treasury_withdrawals") {
+            try {
+              const withdrawals = await blockchainProvider.get(
+                `/governance/proposals/${txHash}/${certIndex}/withdrawals`,
+              ) as ProposalWithdrawal[];
+              setProposalWithdrawals(withdrawals);
+            } catch (error: any) {
+              if (error?.status !== 404) {
+                console.error("Error fetching withdrawals:", error);
+              }
+            }
+          }
+        } catch (error: any) {
+          if (error?.status !== 404) {
+            console.error("Error fetching proposal details:", error);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching proposal metadata:", error);
+      } finally {
+        setLoadingDetails(false);
       }
     }
-    void get();
+    void fetchProposalData();
   }, [id, network]);
 
-  if (!proposalMetadata) return <></>;
+  // Helper function to get proposal status
+  const getProposalStatus = () => {
+    if (!proposalDetails) return null;
+    if (proposalDetails.enacted_epoch) return { label: "Enacted", icon: CheckCircle2, color: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300" };
+    if (proposalDetails.dropped_epoch) return { label: "Dropped", icon: XCircle, color: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300" };
+    if (proposalDetails.expired_epoch) return { label: "Expired", icon: XCircle, color: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300" };
+    if (proposalDetails.ratified_epoch) return { label: "Ratified", icon: CheckCircle2, color: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300" };
+    return { label: "Active", icon: Clock, color: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300" };
+  };
+
+  const status = getProposalStatus();
+
+  if (!proposalMetadata || loadingDetails) {
+    return (
+      <main className="flex flex-1 flex-col gap-4 p-3 sm:p-4 md:gap-6 lg:gap-8 lg:p-8 max-w-7xl mx-auto w-full">
+        <div className="flex items-center justify-center py-12 sm:py-16">
+          <div className="text-center">
+            <div className="w-8 h-8 border-2 border-gray-300 border-t-gray-600 dark:border-gray-600 dark:border-t-gray-400 rounded-full animate-spin mx-auto mb-4"></div>
+            <p className="text-sm sm:text-base text-gray-500 dark:text-gray-400">Loading proposal...</p>
+          </div>
+        </div>
+      </main>
+    );
+  }
 
   return (
-    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+    <main className="flex flex-1 flex-col gap-4 p-3 sm:p-4 md:gap-6 lg:gap-8 lg:p-8 max-w-7xl mx-auto w-full">
+      {/* Proposal Status & Details Card */}
+      {proposalDetails && (
+        <CardUI
+          title="Proposal Details"
+          cardClassName="w-full"
+        >
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+            {/* Status */}
+            {status && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Clock className="h-4 w-4 text-gray-500" />
+                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Status</span>
+                </div>
+                <Badge className={`${status.color} flex items-center gap-1.5 w-fit`}>
+                  <status.icon className="h-3 w-3" />
+                  {status.label}
+                </Badge>
+              </div>
+            )}
+
+            {/* Governance Type */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <FileText className="h-4 w-4 text-gray-500" />
+                <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Type</span>
+              </div>
+              <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 capitalize">
+                {proposalDetails.governance_type.replace(/_/g, " ")}
+              </div>
+            </div>
+
+            {/* Deposit */}
+            {proposalDetails.deposit && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Coins className="h-4 w-4 text-gray-500" />
+                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Deposit</span>
+                </div>
+                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                  {(parseInt(proposalDetails.deposit) / 1_000_000).toFixed(2)} ADA
+                </div>
+              </div>
+            )}
+
+            {/* Ratified Epoch */}
+            {proposalDetails.ratified_epoch && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-gray-500" />
+                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Ratified Epoch</span>
+                </div>
+                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                  {proposalDetails.ratified_epoch}
+                </div>
+              </div>
+            )}
+
+            {/* Enacted Epoch */}
+            {proposalDetails.enacted_epoch && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="h-4 w-4 text-gray-500" />
+                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Enacted Epoch</span>
+                </div>
+                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                  {proposalDetails.enacted_epoch}
+                </div>
+              </div>
+            )}
+
+            {/* Expiration */}
+            {proposalDetails.expiration && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Clock className="h-4 w-4 text-gray-500" />
+                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Expires In</span>
+                </div>
+                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                  {proposalDetails.expiration} epochs
+                </div>
+              </div>
+            )}
+
+            {/* Transaction Hash */}
+            <div className="space-y-2 sm:col-span-2 lg:col-span-1">
+              <div className="flex items-center gap-2">
+                <Hash className="h-4 w-4 text-gray-500" />
+                <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Transaction</span>
+              </div>
+              <div className="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
+                {proposalDetails.tx_hash}
+              </div>
+            </div>
+          </div>
+        </CardUI>
+      )}
+
+      {/* Main Proposal Content */}
       <CardUI
         title={proposalMetadata.json_metadata.body.title}
         cardClassName="w-full"
         headerDom={
           network == 1 && (
-            <div className="flex gap-4">
-              <Button>
+            <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
+              <Button className="w-full sm:w-auto text-xs sm:text-sm py-2">
                 <Link
                   href={`https://gov.tools/governance_actions/${proposalMetadata.tx_hash}#${proposalMetadata.cert_index}`}
                   target="_blank"
+                  className="w-full inline-block"
                 >
                   GOV TOOL
                 </Link>
               </Button>
-              <Button>
+              <Button className="w-full sm:w-auto text-xs sm:text-sm py-2">
                 <Link
                   href={`https://adastat.net/governances/${proposalMetadata.tx_hash}0${proposalMetadata.cert_index}`}
                   target="_blank"
+                  className="w-full inline-block"
                 >
                   ADASTAT
                 </Link>
@@ -79,32 +264,166 @@ export default function WalletGovernanceProposal({ id }: { id: string }) {
           )
         }
       >
-        <RowLabelInfo
-          label="Authors"
-          value={(proposalMetadata.json_metadata.authors as { name: string }[])
-            .map((author) => author.name)
-            .join(", ")}
-          allowOverflow={true}
-        />
+        <div className="space-y-4 sm:space-y-6 w-full">
+          {/* Authors */}
+          <div className="space-y-2 w-full">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 w-full">
+              <div className="text-xs sm:text-sm font-medium text-foreground flex-shrink-0 min-w-20">
+                Authors
+              </div>
+              <div className="flex-1 text-xs sm:text-sm text-muted-foreground break-words">
+                {(proposalMetadata.json_metadata.authors as { name: string }[])
+                  .map((author) => author.name)
+                  .join(", ") || "N/A"}
+              </div>
+            </div>
+          </div>
 
-        <RowLabelInfo
-          label="Abstract"
-          value={proposalMetadata.json_metadata.body.abstract}
-          allowOverflow={true}
-        />
+          {/* Abstract */}
+          <div className="space-y-2 border-t border-gray-200 dark:border-gray-700 pt-4 sm:pt-6 w-full">
+            <div className="flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4 w-full">
+              <div className="text-xs sm:text-sm font-medium text-foreground flex-shrink-0 min-w-20">
+                Abstract
+              </div>
+              <div className="flex-1 min-w-0 w-full prose prose-sm sm:prose-base max-w-none prose-headings:text-sm sm:prose-headings:text-base prose-p:text-xs sm:prose-p:text-sm prose-p:my-2 sm:prose-p:my-3 prose-strong:text-gray-900 dark:prose-strong:text-gray-100 prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:underline prose-ul:text-xs sm:prose-ul:text-sm prose-ol:text-xs sm:prose-ol:text-sm prose-li:text-xs sm:prose-li:text-sm prose-code:text-xs sm:prose-code:text-sm prose-pre:text-xs sm:prose-pre:text-sm">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {proposalMetadata.json_metadata.body.abstract || "No abstract provided."}
+                </ReactMarkdown>
+              </div>
+            </div>
+          </div>
 
-        <RowLabelInfo
-          label="Motivation"
-          value={proposalMetadata.json_metadata.body.motivation}
-          allowOverflow={true}
-        />
+          {/* Motivation */}
+          {proposalMetadata.json_metadata.body.motivation && (
+            <div className="space-y-2 border-t border-gray-200 dark:border-gray-700 pt-4 sm:pt-6 w-full">
+              <div className="flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4 w-full">
+                <div className="text-xs sm:text-sm font-medium text-foreground flex-shrink-0 min-w-20">
+                  Motivation
+                </div>
+                <div className="flex-1 min-w-0 w-full prose prose-sm sm:prose-base max-w-none prose-headings:text-sm sm:prose-headings:text-base prose-p:text-xs sm:prose-p:text-sm prose-p:my-2 sm:prose-p:my-3 prose-strong:text-gray-900 dark:prose-strong:text-gray-100 prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:underline prose-ul:text-xs sm:prose-ul:text-sm prose-ol:text-xs sm:prose-ol:text-sm prose-li:text-xs sm:prose-li:text-sm prose-code:text-xs sm:prose-code:text-sm prose-pre:text-xs sm:prose-pre:text-sm">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {proposalMetadata.json_metadata.body.motivation}
+                  </ReactMarkdown>
+                </div>
+              </div>
+            </div>
+          )}
 
-        <RowLabelInfo
-          label="Rationale"
-          value={proposalMetadata.json_metadata.body.rationale}
-          allowOverflow={true}
-        />
+          {/* Rationale */}
+          {proposalMetadata.json_metadata.body.rationale && (
+            <div className="space-y-2 border-t border-gray-200 dark:border-gray-700 pt-4 sm:pt-6 w-full">
+              <div className="flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4 w-full">
+                <div className="text-xs sm:text-sm font-medium text-foreground flex-shrink-0 min-w-20">
+                  Rationale
+                </div>
+                <div className="flex-1 min-w-0 w-full prose prose-sm sm:prose-base max-w-none prose-headings:text-sm sm:prose-headings:text-base prose-p:text-xs sm:prose-p:text-sm prose-p:my-2 sm:prose-p:my-3 prose-strong:text-gray-900 dark:prose-strong:text-gray-100 prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:underline prose-ul:text-xs sm:prose-ul:text-sm prose-ol:text-xs sm:prose-ol:text-sm prose-li:text-xs sm:prose-li:text-sm prose-code:text-xs sm:prose-code:text-sm prose-pre:text-xs sm:prose-pre:text-sm">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {proposalMetadata.json_metadata.body.rationale}
+                  </ReactMarkdown>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* References */}
+          {proposalMetadata.json_metadata.body.references && proposalMetadata.json_metadata.body.references.length > 0 && (
+            <div className="space-y-2 border-t border-gray-200 dark:border-gray-700 pt-4 sm:pt-6 w-full">
+              <div className="flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4 w-full">
+                <div className="text-xs sm:text-sm font-medium text-foreground flex-shrink-0 min-w-20">
+                  References
+                </div>
+                <div className="flex-1 min-w-0 w-full">
+                  <ul className="space-y-2 text-xs sm:text-sm">
+                    {proposalMetadata.json_metadata.body.references.map((ref, idx) => (
+                      <li key={idx} className="flex items-start gap-2">
+                        <span className="text-gray-500">•</span>
+                        {ref.uri ? (
+                          <a href={ref.uri} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline break-all">
+                            {ref.label || ref.uri}
+                          </a>
+                        ) : (
+                          <span className="text-gray-600 dark:text-gray-400">{ref.label}</span>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
       </CardUI>
+
+      {/* Parameters Card - Show for parameter change proposals */}
+      {proposalParameters && proposalParameters.parameters && (
+        <CardUI
+          title="Protocol Parameters"
+          cardClassName="w-full"
+        >
+          <div className="space-y-4">
+            <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-4">
+              Proposed changes to protocol parameters
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
+              {Object.entries(proposalParameters.parameters)
+                .filter(([key, value]) => value !== null && value !== undefined && key !== 'id' && key !== 'tx_hash' && key !== 'cert_index')
+                .slice(0, 12)
+                .map(([key, value]) => (
+                  <div key={key} className="space-y-1 p-2 sm:p-3 bg-gray-50 dark:bg-gray-800/50 rounded">
+                    <div className="text-xs font-medium text-gray-700 dark:text-gray-300 capitalize">
+                      {key.replace(/_/g, " ")}
+                    </div>
+                    <div className="text-xs text-gray-600 dark:text-gray-400 break-words">
+                      {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                    </div>
+                  </div>
+                ))}
+            </div>
+            {Object.keys(proposalParameters.parameters).length > 12 && (
+              <div className="text-xs text-gray-500 dark:text-gray-400 pt-2">
+                + {Object.keys(proposalParameters.parameters).length - 12} more parameters
+              </div>
+            )}
+          </div>
+        </CardUI>
+      )}
+
+      {/* Withdrawals Card - Show for treasury withdrawal proposals */}
+      {proposalWithdrawals && proposalWithdrawals.length > 0 && (
+        <CardUI
+          title="Treasury Withdrawals"
+          cardClassName="w-full"
+        >
+          <div className="space-y-3">
+            <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-2">
+              {proposalWithdrawals.length} withdrawal{proposalWithdrawals.length !== 1 ? 's' : ''}
+            </div>
+            <div className="space-y-2">
+              {proposalWithdrawals.map((withdrawal, idx) => (
+                <div key={idx} className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 p-3 bg-gray-50 dark:bg-gray-800/50 rounded">
+                  <div className="flex items-center gap-2 min-w-0 flex-1">
+                    <Wallet className="h-4 w-4 text-gray-500 flex-shrink-0" />
+                    <span className="text-xs font-mono text-gray-700 dark:text-gray-300 break-all">
+                      {withdrawal.stake_address}
+                    </span>
+                  </div>
+                  <div className="text-sm font-semibold text-gray-900 dark:text-gray-100 flex-shrink-0">
+                    {(parseInt(withdrawal.amount) / 1_000_000).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ADA
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-600 dark:text-gray-400">Total Amount:</span>
+                <span className="font-semibold text-gray-900 dark:text-gray-100">
+                  {proposalWithdrawals.reduce((sum, w) => sum + parseInt(w.amount), 0) / 1_000_000} ADA
+                </span>
+              </div>
+            </div>
+          </div>
+        </CardUI>
+      )}
       {appWallet && (
         <UTxOSelector
           appWallet={appWallet}
@@ -121,24 +440,31 @@ export default function WalletGovernanceProposal({ id }: { id: string }) {
           proposalId={`${proposalMetadata.tx_hash}#${proposalMetadata.cert_index}`}
           selectedBallotId={selectedBallotId}
           proposalTitle={proposalMetadata.json_metadata.body.title}
-          onOpenBallotSidebar={() => setIsBallotSidebarOpen(true)}
         />
       )}
       {appWallet && (
-        <FloatingBallotSidebar
+        <BallotModal
           appWallet={appWallet}
           selectedBallotId={selectedBallotId}
           onSelectBallot={setSelectedBallotId}
-          ballotCount={ballots?.length ?? 0}
-          totalProposalCount={totalProposalCount}
-          proposalCount={proposalCount}
-          manualUtxos={manualUtxos}
-          open={isBallotSidebarOpen}
-          onOpenChange={setIsBallotSidebarOpen}
-          currentProposalId={`${proposalMetadata.tx_hash}#${proposalMetadata.cert_index}`}
-          currentProposalTitle={proposalMetadata.json_metadata.body.title}
+          utxos={manualUtxos}
+          open={isOpen}
+          onOpenChange={closeModal}
+          currentProposalId={currentProposalId || `${proposalMetadata.tx_hash}#${proposalMetadata.cert_index}`}
+          currentProposalTitle={currentProposalTitle || proposalMetadata.json_metadata.body.title}
+          onBallotChanged={() => {
+            // Refresh any necessary data
+          }}
         />
       )}
     </main>
   );
 }
+
+export default function WalletGovernanceProposal({ id }: { id: string }) {
+  return (
+    <BallotModalProvider>
+      <WalletGovernanceProposalContent id={id} />
+    </BallotModalProvider>
+  );
+}
diff --git a/src/components/pages/wallet/governance/proposal/voteButtton.tsx b/src/components/pages/wallet/governance/proposal/voteButtton.tsx
index 9b3d2f57..58398e82 100644
--- a/src/components/pages/wallet/governance/proposal/voteButtton.tsx
+++ b/src/components/pages/wallet/governance/proposal/voteButtton.tsx
@@ -31,6 +31,10 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import type { BallotType } from "../ballot/ballot";
+import { useBallotModal } from "@/hooks/useBallotModal";
+import { Plus, Info, Lock, FileText, CheckCircle2, ClipboardList } from "lucide-react";
+import { ProposalDetails } from "@/types/governance";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface VoteButtonProps {
   appWallet: Wallet;
@@ -40,6 +44,7 @@ interface VoteButtonProps {
   utxos: UTxO[];
   selectedBallotId?: string;
   proposalTitle?: string;
+  proposalDetails?: ProposalDetails;
   /**
    * Optional handler from the proposal page to open the ballot sidebar.
    * When provided, the \"Add proposal to ballot\" button will simply
@@ -56,21 +61,25 @@ export default function VoteButton({
   utxos,
   selectedBallotId,
   proposalTitle,
+  proposalDetails,
   onOpenBallotSidebar,
 }: VoteButtonProps) {
   // Use the custom hook for ballots (still used for proxy / context where needed)
   const { ballots } = useBallot(appWallet?.id);
 
-  // Determine if this proposal already exists on any ballot
-  const isOnAnyBallot = useMemo(
-    () =>
-      !!proposalId &&
-      Array.isArray(ballots) &&
-      ballots.some(
-        (b: BallotType) => Array.isArray(b.items) && b.items.includes(proposalId),
-      ),
-    [ballots, proposalId],
-  );
+  // Determine if this proposal already exists on any ballot and count ballots
+  const { isOnAnyBallot, ballotCount } = useMemo(() => {
+    if (!proposalId || !Array.isArray(ballots)) {
+      return { isOnAnyBallot: false, ballotCount: 0 };
+    }
+    const matchingBallots = ballots.filter(
+      (b: BallotType) => Array.isArray(b.items) && b.items.includes(proposalId),
+    );
+    return {
+      isOnAnyBallot: matchingBallots.length > 0,
+      ballotCount: matchingBallots.length,
+    };
+  }, [ballots, proposalId]);
 
   const drepInfo = useWalletsStore((state) => state.drepInfo);
   const [loading, setLoading] = useState(false);
@@ -80,12 +89,22 @@ export default function VoteButton({
   const network = useSiteStore((state) => state.network);
   const { newTransaction } = useTransaction();
   const { multisigWallet } = useMultisigWallet();
+  const { openModal, setCurrentProposal } = useBallotModal();
 
   // Proxy state
   const { isProxyEnabled, selectedProxyId } = useProxy();
   const { wallet } = useWallet();
   const userAddress = useUserStore((state) => state.userAddress);
 
+  // Check if proposal is active (only Active proposals can be voted on)
+  const isProposalActive = useMemo(() => {
+    if (!proposalDetails) return true; // If no details, assume active to not block voting
+    // A proposal is active if it has no enacted, dropped, or expired epoch
+    return !proposalDetails.enacted_epoch && 
+           !proposalDetails.dropped_epoch && 
+           !proposalDetails.expired_epoch;
+  }, [proposalDetails]);
+
   // Get proxies for proxy mode
   const { data: proxies } = api.proxy.getProxiesByUserOrWallet.useQuery(
     { 
@@ -324,56 +343,110 @@ export default function VoteButton({
   }
 
   return (
-    <div className="flex w-full max-w-sm flex-col items-center justify-center space-y-2">
-      <Select
-        value={voteKind}
-        onValueChange={(value) =>
-          setVoteKind(value as "Yes" | "No" | "Abstain")
-        }
-      >
-        <SelectTrigger className="w-full rounded-md border border-gray-300 px-4 py-2 focus:ring-2 focus:ring-blue-500">
-          <SelectValue placeholder="Select Vote Kind" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectItem value="Yes">Yes</SelectItem>
-            <SelectItem value="No">No</SelectItem>
-            <SelectItem value="Abstain">Abstain</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-
-      {isProxyEnabled && proxies && proxies.length > 0 && !selectedProxyId && (
-        <div className="w-full p-2 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
-          <p className="text-xs text-yellow-800 dark:text-yellow-200 font-medium">
-            Proxy Mode Active - Select a proxy to continue
-          </p>
-          <p className="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
-            Go to the Proxy Control panel above and select a proxy to enable voting.
-          </p>
+    <div className="flex w-full max-w-sm flex-col items-stretch justify-center space-y-2 sm:space-y-3">
+      {!isProposalActive ? (
+        // Inactive proposal state
+        <div className="flex flex-col items-center gap-2">
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400 cursor-help">
+                  <Lock className="h-4 w-4" />
+                  <span>Voting closed</span>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                <p className="max-w-xs">
+                  This proposal can no longer be voted on. You can still manage it in your ballots.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
-      )}
+      ) : (
+        // Active proposal state
+        <>
+          <Select
+            value={voteKind}
+            onValueChange={(value) =>
+              setVoteKind(value as "Yes" | "No" | "Abstain")
+            }
+          >
+            <SelectTrigger className="w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 sm:px-4 py-2 text-sm sm:text-base focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800">
+              <SelectValue placeholder="Select Vote Kind" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="Yes">Yes</SelectItem>
+                <SelectItem value="No">No</SelectItem>
+                <SelectItem value="Abstain">Abstain</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
 
-      <Button
-        onClick={hasValidProxy ? voteProxy : vote}
-        disabled={loading || utxos.length === 0}
-        className="w-full rounded-md bg-blue-600 px-6 py-2 font-semibold text-white shadow hover:bg-blue-700"
-      >
-        {loading
-          ? "Voting..."
-          : utxos.length > 0
-            ? `Vote${hasValidProxy ? " (Proxy Mode)" : ""}`
-            : "No UTxOs Available"}
-      </Button>
+          {isProxyEnabled && proxies && proxies.length > 0 && !selectedProxyId && (
+            <div className="w-full p-3 bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
+              <div className="flex items-start gap-2">
+                <Info className="h-4 w-4 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="text-xs sm:text-sm text-yellow-800 dark:text-yellow-200 font-medium">
+                    Proxy Mode Active
+                  </p>
+                  <p className="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+                    Select a proxy in the Proxy Control panel above to enable voting.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
 
-      {onOpenBallotSidebar && (
-        <Button
-          onClick={onOpenBallotSidebar}
-          className="w-full rounded-md bg-green-600 hover:bg-green-700 px-6 py-2 font-semibold text-white shadow"
-        >
-          {isOnAnyBallot ? "Manage proposal on ballots" : "Add proposal to ballot"}
-        </Button>
+          <Button
+            onClick={hasValidProxy ? voteProxy : vote}
+            disabled={loading || utxos.length === 0}
+            className="w-full rounded-md bg-blue-600 px-4 sm:px-6 py-2 text-sm sm:text-base font-semibold text-white shadow hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading
+              ? "Voting..."
+              : utxos.length > 0
+                ? `Vote${hasValidProxy ? " (Proxy)" : ""}`
+                : "No UTxOs Available"}
+          </Button>
+        </>
       )}
+
+      <div className="flex justify-center">
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={() => {
+                  setCurrentProposal(proposalId, proposalTitle);
+                  openModal();
+                }}
+                variant="outline"
+                size="sm"
+                className="h-9 w-9 p-0 rounded-md border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-400 dark:hover:border-gray-500 flex items-center justify-center transition-colors relative"
+              >
+                {isOnAnyBallot ? (
+                  <>
+                    <ClipboardList className="h-4 w-4" />
+                    {ballotCount > 0 && (
+                      <span className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center text-[10px] font-semibold bg-green-500 dark:bg-green-600 text-white rounded-full border-2 border-white dark:border-gray-800">
+                        {ballotCount}
+                      </span>
+                    )}
+                  </>
+                ) : (
+                  <ClipboardList className="h-4 w-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              <p>{isOnAnyBallot ? `Manage in ${ballotCount} ballot${ballotCount !== 1 ? 's' : ''}` : "Add to Ballot"}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
     </div>
   );
 }
diff --git a/src/components/pages/wallet/governance/proposals.tsx b/src/components/pages/wallet/governance/proposals.tsx
index cd97f091..0c26c538 100644
--- a/src/components/pages/wallet/governance/proposals.tsx
+++ b/src/components/pages/wallet/governance/proposals.tsx
@@ -14,8 +14,10 @@ import { useEffect, useState } from "react";
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from "remark-gfm";
 import { getProvider } from "@/utils/get-provider";
+import { getTxBuilder } from "@/utils/get-tx-builder";
+import { MeshProxyContract } from "@/components/multisig/proxy/offchain";
 import { useSiteStore } from "@/lib/zustand/site";
-import { ProposalMetadata } from "@/types/governance";
+import { ProposalMetadata, ProposalDetails } from "@/types/governance";
 import {
   Dialog,
   DialogContent,
@@ -27,16 +29,242 @@ import {
 import Link from "next/link";
 import VoteButton from "./proposal/voteButtton";
 import { UTxO } from "@meshsdk/core";
+import useMultisigWallet from "@/hooks/useMultisigWallet";
+import { Badge } from "@/components/ui/badge";
+import { CheckCircle2, XCircle, MinusCircle, ChevronDown, ChevronUp, Clock, Calendar, Coins, Hash, FileText, Plus } from "lucide-react";
+import { useProxy } from "@/hooks/useProxy";
+import { useProxyData } from "@/lib/zustand/proxy";
+import { useBallotModal } from "@/hooks/useBallotModal";
+
+type VoteRecord = {
+  tx_hash: string;
+  cert_index: number;
+  vote: "yes" | "no" | "abstain";
+  proposal_tx_hash: string;
+  proposal_cert_index: number;
+  proposal_id: string;
+};
+
+type VotingStatistics = {
+  total: number;
+  yes: number;
+  no: number;
+  abstain: number;
+};
+
+// Helper functions for proposal details
+const getProposalStatus = (details?: ProposalDetails) => {
+  if (!details) return null;
+  if (details.enacted_epoch) return { label: "Enacted", icon: CheckCircle2, color: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300" };
+  if (details.dropped_epoch) return { label: "Dropped", icon: XCircle, color: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300" };
+  if (details.expired_epoch) return { label: "Expired", icon: XCircle, color: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300" };
+  if (details.ratified_epoch) return { label: "Ratified", icon: CheckCircle2, color: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300" };
+  return { label: "Active", icon: Clock, color: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300" };
+};
 
 export default function AllProposals({ appWallet, utxos, selectedBallotId, onSelectBallot }: { appWallet: Wallet; utxos: UTxO[]; selectedBallotId?: string; onSelectBallot?: (id: string) => void }) {
   const network = useSiteStore((state) => state.network);
+  const { multisigWallet } = useMultisigWallet();
+  const { isProxyEnabled, selectedProxyId } = useProxy();
+  const { proxies } = useProxyData(appWallet?.id);
   const [proposals, setProposals] = useState<ProposalMetadata[]>([]);
   const [nextPage, setNextPage] = useState(1);
   const [hasMore, setHasMore] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
+  const [votes, setVotes] = useState<Map<string, VoteRecord>>(new Map());
+  const [loadingVotes, setLoadingVotes] = useState(false);
+  const [expandedProposals, setExpandedProposals] = useState<Set<string>>(new Set());
+  const [votingStatistics, setVotingStatistics] = useState<VotingStatistics>({ total: 0, yes: 0, no: 0, abstain: 0 });
+  const [proxyDrepId, setProxyDrepId] = useState<string | null>(null);
+  const [proposalDetails, setProposalDetails] = useState<Map<string, ProposalDetails>>(new Map());
+  const [loadingDetails, setLoadingDetails] = useState<Set<string>>(new Set());
+  const { openModal, setCurrentProposal } = useBallotModal();
   const count = 10;
   const order = "desc";
 
+  // Get DRep ID for fetching voting history (proxy mode or standard mode)
+  const standardDrepId = multisigWallet?.getKeysByRole(3) ? multisigWallet?.getDRepId() : appWallet?.dRepId;
+  
+  // Get proxy DRep ID if proxy is enabled
+  useEffect(() => {
+    const fetchProxyDrepId = async () => {
+      const hasValidProxy = isProxyEnabled && selectedProxyId && proxies && proxies.length > 0;
+      const selectedProxy = hasValidProxy ? proxies.find(p => p.id === selectedProxyId) : null;
+      
+      if (hasValidProxy && selectedProxy && appWallet?.scriptCbor) {
+        // If proxy has drepId cached, use it
+        if (selectedProxy.drepId) {
+          setProxyDrepId(selectedProxy.drepId);
+          return;
+        }
+        
+        // Otherwise, calculate it from the proxy contract
+        try {
+          const txBuilder = getTxBuilder(network);
+          const proxyContract = new MeshProxyContract(
+            {
+              mesh: txBuilder,
+              wallet: undefined,
+              networkId: network,
+            },
+            {
+              paramUtxo: JSON.parse(selectedProxy.paramUtxo || '{}'),
+            },
+            appWallet.scriptCbor,
+          );
+          proxyContract.proxyAddress = selectedProxy.proxyAddress;
+          const drepId = proxyContract.getDrepId();
+          setProxyDrepId(drepId);
+        } catch (error) {
+          console.error("Error getting proxy DRep ID:", error);
+          setProxyDrepId(null);
+        }
+      } else {
+        setProxyDrepId(null);
+      }
+    };
+    
+    fetchProxyDrepId();
+  }, [isProxyEnabled, selectedProxyId, proxies, appWallet?.scriptCbor, network]);
+  
+  const dRepId = proxyDrepId || standardDrepId;
+
+  const toggleProposal = (proposalId: string) => {
+    setExpandedProposals(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(proposalId)) {
+        newSet.delete(proposalId);
+      } else {
+        newSet.add(proposalId);
+        // Fetch proposal details when expanding
+        if (!proposalDetails.has(proposalId) && !loadingDetails.has(proposalId)) {
+          fetchProposalDetails(proposalId);
+        }
+      }
+      return newSet;
+    });
+  };
+
+
+  const fetchProposalDetails = async (proposalId: string) => {
+    const [txHash, certIndex] = proposalId.split("#");
+    setLoadingDetails(prev => new Set(prev).add(proposalId));
+    
+    try {
+      const blockchainProvider = getProvider(network);
+      const details = await blockchainProvider.get(
+        `/governance/proposals/${txHash}/${certIndex}`
+      ) as ProposalDetails;
+      
+      setProposalDetails(prev => {
+        const newMap = new Map(prev);
+        newMap.set(proposalId, details);
+        return newMap;
+      });
+    } catch (error: any) {
+      if (error?.status !== 404) {
+        console.error("Error fetching proposal details:", error);
+      }
+    } finally {
+      setLoadingDetails(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(proposalId);
+        return newSet;
+      });
+    }
+  };
+
+
+  // Fetch DRep voting history
+  useEffect(() => {
+    async function fetchVotingHistory() {
+      if (!dRepId) {
+        setVotes(new Map());
+        setVotingStatistics({ total: 0, yes: 0, no: 0, abstain: 0 });
+        return;
+      }
+      
+      setLoadingVotes(true);
+      try {
+        const blockchainProvider = getProvider(network);
+        // Convert CIP-129 DRep ID to CIP-105 format for API
+        const { getDRepIds } = await import("@meshsdk/core-cst");
+        const drepIds = getDRepIds(dRepId);
+        const cip105DrepId = drepIds.cip105;
+        
+        // Fetch all pages of votes
+        let allVotes: any[] = [];
+        let page = 1;
+        let hasMore = true;
+        
+        while (hasMore) {
+          const votesData: any[] = await blockchainProvider.get(
+            `/governance/dreps/${cip105DrepId}/votes?count=100&page=${page}&order=asc`
+          );
+          
+          if (Array.isArray(votesData) && votesData.length > 0) {
+            allVotes = [...allVotes, ...votesData];
+            if (votesData.length < 100) {
+              hasMore = false;
+            } else {
+              page++;
+            }
+          } else {
+            hasMore = false;
+          }
+        }
+        
+        const votesMap = new Map<string, VoteRecord>();
+        const stats: VotingStatistics = { total: 0, yes: 0, no: 0, abstain: 0 };
+        
+        if (Array.isArray(allVotes)) {
+          allVotes.forEach((vote: any) => {
+            // Match votes to proposals using proposal_tx_hash and proposal_cert_index
+            const proposalKey = `${vote.proposal_tx_hash}#${vote.proposal_cert_index}`;
+            
+            // Normalize vote to lowercase
+            const voteValue = (vote.vote || "").toLowerCase() as "yes" | "no" | "abstain";
+            
+            // Store vote record
+            votesMap.set(proposalKey, {
+              tx_hash: vote.tx_hash,
+              cert_index: vote.cert_index,
+              vote: voteValue,
+              proposal_tx_hash: vote.proposal_tx_hash,
+              proposal_cert_index: vote.proposal_cert_index,
+              proposal_id: vote.proposal_id,
+            });
+            
+            // Update statistics
+            stats.total++;
+            if (voteValue === "yes") {
+              stats.yes++;
+            } else if (voteValue === "no") {
+              stats.no++;
+            } else if (voteValue === "abstain") {
+              stats.abstain++;
+            }
+          });
+        }
+        
+        setVotes(votesMap);
+        setVotingStatistics(stats);
+      } catch (error: any) {
+        // Handle 404 or other errors gracefully - voting history is optional
+        if (error?.status !== 404) {
+          console.error("Error fetching voting history:", error);
+        }
+        // Set empty map on error
+        setVotes(new Map());
+        setVotingStatistics({ total: 0, yes: 0, no: 0, abstain: 0 });
+      } finally {
+        setLoadingVotes(false);
+      }
+    }
+    
+    fetchVotingHistory();
+  }, [dRepId, network]);
+
   useEffect(() => {
     setProposals([]);
     setNextPage(1);
@@ -65,20 +293,31 @@ export default function AllProposals({ appWallet, utxos, selectedBallotId, onSel
         }));
         setProposals(skeletons);
 
-        const metadataResponses = await Promise.all(proposalsData.map(async (p: any) => {
+        // Fetch both metadata and details in parallel for all proposals
+        const proposalResponses = await Promise.all(proposalsData.map(async (p: any) => {
+          const proposalId = p.tx_hash + "#" + p.cert_index;
           try {
-            const metadata = await blockchainProvider.get(`/governance/proposals/${p.tx_hash}/${p.cert_index}/metadata`);
+            // Fetch both metadata and details in parallel
+            const [metadata, details] = await Promise.all([
+              blockchainProvider.get(`/governance/proposals/${p.tx_hash}/${p.cert_index}/metadata`),
+              blockchainProvider.get(`/governance/proposals/${p.tx_hash}/${p.cert_index}`).catch(() => null)
+            ]);
+
             return {
-              key: p.tx_hash + "#" + p.cert_index,
-              data: {
+              key: proposalId,
+              metadata: {
                 ...metadata,
                 governance_type: p.governance_type
-              }
+              },
+              details: details as ProposalDetails | null
             };
           } catch (e: any) {
+            // If metadata fetch fails, try to still get details
+            const details = await blockchainProvider.get(`/governance/proposals/${p.tx_hash}/${p.cert_index}`).catch(() => null);
+            
             return {
-              key: p.tx_hash + "#" + p.cert_index,
-              data: {
+              key: proposalId,
+              metadata: {
                 tx_hash: p.tx_hash,
                 cert_index: Number(p.cert_index),
                 governance_type: p.governance_type,
@@ -94,19 +333,32 @@ export default function AllProposals({ appWallet, utxos, selectedBallotId, onSel
                   },
                   authors: []
                 }
-              }
+              },
+              details: details as ProposalDetails | null
             };
           }
         }));
 
+        // Update proposals with metadata
         setProposals(prev => {
-          const updates = new Map(metadataResponses.map(res => [res.key, res.data]));
+          const updates = new Map(proposalResponses.map(res => [res.key, res.metadata]));
           return prev.map(p => {
             const key = p.tx_hash + "#" + p.cert_index;
             return updates.has(key) ? updates.get(key)! : p;
           });
         });
 
+        // Update proposal details
+        setProposalDetails(prev => {
+          const newMap = new Map(prev);
+          proposalResponses.forEach(res => {
+            if (res.details) {
+              newMap.set(res.key, res.details);
+            }
+          });
+          return newMap;
+        });
+
         if (proposalsData.length < count) {
           setHasMore(false);
         } else {
@@ -151,52 +403,72 @@ export default function AllProposals({ appWallet, utxos, selectedBallotId, onSel
 
       setProposals(prev => [...prev, ...skeletons]);
 
-      // 2. Fetch metadata for all in parallel with Promise.all.
-      const metadataResponses = await Promise.all(newProposalsData.map(async (p) => {
+      // 2. Fetch metadata and details for all proposals in parallel
+      const proposalResponses = await Promise.all(newProposalsData.map(async (p) => {
+        const proposalId = p.tx_hash + "#" + p.cert_index;
         try {
-          const metadata = await blockchainProvider.get(
-            `/governance/proposals/${p.tx_hash}/${p.cert_index}/metadata`
-          );
+          // Fetch both metadata and details in parallel
+          const [metadata, details] = await Promise.all([
+            blockchainProvider.get(`/governance/proposals/${p.tx_hash}/${p.cert_index}/metadata`),
+            blockchainProvider.get(`/governance/proposals/${p.tx_hash}/${p.cert_index}`).catch(() => null)
+          ]);
+
           return {
-            key: p.tx_hash + "#" + p.cert_index,
-            data: {
+            key: proposalId,
+            metadata: {
               ...metadata,
               governance_type: p.governance_type
-            }
+            },
+            details: details as ProposalDetails | null
           };
         } catch (e: any) {
-            return {
-              key: p.tx_hash + "#" + p.cert_index,
-              data: {
-                tx_hash: p.tx_hash,
-                cert_index: Number(p.cert_index),
-                governance_type: p.governance_type,
-                hash: "",
-                url: "",
-                bytes: "",
-                json_metadata: {
-                  body: {
-                    title: "Metadata could not be loaded.",
-                    abstract: p.tx_hash + "#" + p.cert_index,
-                    motivation: "",
-                    rationale: ""
-                  },
-                  authors: []
-                }
+          // If metadata fetch fails, try to still get details
+          const details = await blockchainProvider.get(`/governance/proposals/${p.tx_hash}/${p.cert_index}`).catch(() => null);
+          
+          return {
+            key: proposalId,
+            metadata: {
+              tx_hash: p.tx_hash,
+              cert_index: Number(p.cert_index),
+              governance_type: p.governance_type,
+              hash: "",
+              url: "",
+              bytes: "",
+              json_metadata: {
+                body: {
+                  title: "Metadata could not be loaded.",
+                  abstract: p.tx_hash + "#" + p.cert_index,
+                  motivation: "",
+                  rationale: ""
+                },
+                authors: []
               }
-            };
+            },
+            details: details as ProposalDetails | null
+          };
         }
       }));
 
-      // 3. Replace each skeleton in proposals once its metadata is loaded.
+      // 3. Update proposals with metadata
       setProposals(prev => {
-        const updates = new Map(metadataResponses.filter(Boolean).map(res => [res!.key, res!.data]));
+        const updates = new Map(proposalResponses.map(res => [res.key, res.metadata]));
         return prev.map(p => {
           const key = p.tx_hash + "#" + p.cert_index;
           return updates.has(key) ? updates.get(key)! : p;
         });
       });
 
+      // 4. Update proposal details
+      setProposalDetails(prev => {
+        const newMap = new Map(prev);
+        proposalResponses.forEach(res => {
+          if (res.details) {
+            newMap.set(res.key, res.details);
+          }
+        });
+        return newMap;
+      });
+
       setNextPage(nextPage + 1);
       if (proposalsData.length < count) {
         setHasMore(false);
@@ -211,79 +483,364 @@ export default function AllProposals({ appWallet, utxos, selectedBallotId, onSel
       title="Proposals"
       description={`All proposals submitted by the community`}
     >
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-3 sm:gap-4">
+        {/* Voting Statistics */}
+        {dRepId && (
+          <div className="mb-2 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
+            <h3 className="text-sm font-semibold mb-3 text-gray-900 dark:text-gray-100">
+              {isProxyEnabled ? "Proxy DRep" : "DRep"} Voting Statistics
+            </h3>
+            {loadingVotes ? (
+              <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+                <div className="w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin"></div>
+                Loading voting history...
+              </div>
+            ) : (
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                <div className="text-center">
+                  <div className="text-lg font-bold text-gray-900 dark:text-gray-100">{votingStatistics.total}</div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">Total Votes</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-lg font-bold text-green-600 dark:text-green-400">{votingStatistics.yes}</div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">Yes</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-lg font-bold text-red-600 dark:text-red-400">{votingStatistics.no}</div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">No</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-lg font-bold text-gray-600 dark:text-gray-400">{votingStatistics.abstain}</div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">Abstain</div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
         {proposals.length > 0 && (
           <>
             {/* Desktop Table View */}
-            <div className="hidden md:block">
-              <Table>
+            <div className="hidden lg:block w-full">
+              <Table className="w-full table-fixed">
                 <TableHeader>
                   <TableRow>
-                    <TableHead>Title</TableHead>
-                    <TableHead>Authors</TableHead>
-                    <TableHead>Abstract</TableHead>
-                    <TableHead>Action</TableHead>
-                    <TableHead></TableHead>
+                    <TableHead className="w-[40%] text-sm font-semibold align-top">Proposal</TableHead>
+                    <TableHead className="w-[45%] text-sm font-semibold align-top">Abstract</TableHead>
+                    <TableHead className="w-[15%] text-sm font-semibold align-top">Action</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {proposals.map((proposal) => (
-                    <ProposalRow
-                      key={proposal.tx_hash + "#" + proposal.cert_index}
-                      proposal={proposal}
-                      appWallet={appWallet}
-                      utxos={utxos}
-                      selectedBallotId={selectedBallotId}
-                    />
-                  ))}
+                  {proposals.map((proposal) => {
+                    const proposalId = proposal.tx_hash + "#" + proposal.cert_index;
+                    const vote = votes.get(proposalId);
+                    const details = proposalDetails.get(proposalId);
+                    const isLoadingDetails = loadingDetails.has(proposalId);
+                    return (
+                      <ProposalRow
+                        key={proposalId}
+                        proposal={proposal}
+                        appWallet={appWallet}
+                        utxos={utxos}
+                        selectedBallotId={selectedBallotId}
+                        vote={vote}
+                        isExpanded={expandedProposals.has(proposalId)}
+                        onToggle={() => toggleProposal(proposalId)}
+                        details={details}
+                        isLoadingDetails={isLoadingDetails}
+                        setCurrentProposal={setCurrentProposal}
+                        openModal={openModal}
+                      />
+                    );
+                  })}
                 </TableBody>
               </Table>
             </div>
 
-            {/* Mobile Card View */}
-            <div className="block md:hidden space-y-4">
-              {proposals.map((proposal) => (
-                <div
-                  key={proposal.tx_hash + "#" + proposal.cert_index}
-                  className="border rounded-lg p-4 shadow"
-                >
-                  <div className="text-sm font-semibold mb-1">
-                    {proposal.json_metadata.body.title}
-                  </div>
-                  <div className="text-xs text-gray-500 mb-1">
-                    Authors:{" "}
-                    {proposal.json_metadata.authors
-                      .map((author: any) => author.name)
-                      .join(", ")}
-                  </div>
-                  <div className="text-xs text-gray-600 mb-2 prose prose-sm">
-                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                      {proposal.json_metadata.body.abstract}
-                    </ReactMarkdown>
-                  </div>
-                  <div className="text-xs text-gray-700 mb-2">
-                    Type:{" "}
-                    {proposal.governance_type.split("_").join(" ").toUpperCase()}
+            {/* Mobile/Tablet Card View */}
+            <div className="block lg:hidden space-y-3 sm:space-y-4">
+              {proposals.map((proposal) => {
+                const proposalId = proposal.tx_hash + "#" + proposal.cert_index;
+                const vote = votes.get(proposalId);
+                const isExpanded = expandedProposals.has(proposalId);
+                const details = proposalDetails.get(proposalId);
+                const isLoadingDetails = loadingDetails.has(proposalId);
+                return (
+                  <div
+                    key={proposalId}
+                    className="border rounded-lg shadow-sm bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow overflow-hidden"
+                  >
+                    {/* Collapsible Header */}
+                    <button
+                      onClick={() => toggleProposal(proposalId)}
+                      className="w-full p-3 sm:p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                    >
+                      <div className="flex items-start justify-between gap-2 sm:gap-3">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-start gap-2 mb-2">
+                            <h3 className="text-sm sm:text-base font-semibold break-words text-gray-900 dark:text-gray-100 leading-tight flex-1">
+                              {proposal.json_metadata.body.title}
+                            </h3>
+                            {vote && (
+                              <div className="flex-shrink-0 mt-0.5">
+                                <VoteBadge voteKind={{
+                                  "yes": "Yes" as const,
+                                  "no": "No" as const,
+                                  "abstain": "Abstain" as const
+                                }[vote.vote]} />
+                              </div>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                            {details && getProposalStatus(details) && (() => {
+                              const status = getProposalStatus(details)!;
+                              const StatusIcon = status.icon;
+                              return (
+                                <div>
+                                  <Badge className={`${status.color} flex items-center gap-1 w-fit`}>
+                                    <StatusIcon className="h-3 w-3" />
+                                    {status.label}
+                                  </Badge>
+                                </div>
+                              );
+                            })()}
+                            <div>
+                              <span className="font-medium">Type:</span>{" "}
+                              <span className="font-semibold">
+                                {proposal.governance_type.split("_").join(" ").toUpperCase()}
+                              </span>
+                            </div>
+                            {proposal.json_metadata.authors.length > 0 && (
+                              <div>
+                                <span className="font-medium">Authors:</span>{" "}
+                                <span className="break-words">
+                                  {proposal.json_metadata.authors
+                                    .map((author: any) => author.name)
+                                    .join(", ")}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                        <div className="flex-shrink-0 ml-2">
+                          {isExpanded ? (
+                            <ChevronUp className="h-5 w-5 text-gray-400" />
+                          ) : (
+                            <ChevronDown className="h-5 w-5 text-gray-400" />
+                          )}
+                        </div>
+                      </div>
+                    </button>
+
+                    {/* Expandable Content */}
+                    {isExpanded && (
+                      <div className="px-3 sm:px-4 pb-3 sm:pb-4 border-t border-gray-200 dark:border-gray-700 pt-3 sm:pt-4 space-y-3 sm:space-y-4">
+                        {/* Proposal Details */}
+                        {isLoadingDetails ? (
+                          <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+                            <div className="w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin"></div>
+                            Loading details...
+                          </div>
+                        ) : details && (
+                          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 pb-3 border-b border-gray-200 dark:border-gray-700">
+                            {/* Status */}
+                            {getProposalStatus(details) && (() => {
+                              const status = getProposalStatus(details)!;
+                              const StatusIcon = status.icon;
+                              return (
+                                <div className="space-y-2">
+                                  <div className="flex items-center gap-2">
+                                    <Clock className="h-4 w-4 text-gray-500" />
+                                    <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Status</span>
+                                  </div>
+                                  <Badge className={`${status.color} flex items-center gap-1.5 w-fit`}>
+                                    <StatusIcon className="h-3 w-3" />
+                                    {status.label}
+                                  </Badge>
+                                </div>
+                              );
+                            })()}
+
+                            {/* Governance Type */}
+                            <div className="space-y-2">
+                              <div className="flex items-center gap-2">
+                                <FileText className="h-4 w-4 text-gray-500" />
+                                <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Type</span>
+                              </div>
+                              <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 capitalize">
+                                {details.governance_type.replace(/_/g, " ")}
+                              </div>
+                            </div>
+
+                            {/* Deposit */}
+                            {details.deposit && (
+                              <div className="space-y-2">
+                                <div className="flex items-center gap-2">
+                                  <Coins className="h-4 w-4 text-gray-500" />
+                                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Deposit</span>
+                                </div>
+                                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                                  {(parseInt(details.deposit) / 1_000_000).toFixed(2)} ADA
+                                </div>
+                              </div>
+                            )}
+
+                            {/* Ratified Epoch */}
+                            {details.ratified_epoch && (
+                              <div className="space-y-2">
+                                <div className="flex items-center gap-2">
+                                  <Calendar className="h-4 w-4 text-gray-500" />
+                                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Ratified Epoch</span>
+                                </div>
+                                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                                  {details.ratified_epoch}
+                                </div>
+                              </div>
+                            )}
+
+                            {/* Enacted Epoch */}
+                            {details.enacted_epoch && (
+                              <div className="space-y-2">
+                                <div className="flex items-center gap-2">
+                                  <CheckCircle2 className="h-4 w-4 text-gray-500" />
+                                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Enacted Epoch</span>
+                                </div>
+                                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                                  {details.enacted_epoch}
+                                </div>
+                              </div>
+                            )}
+
+                            {/* Expiration */}
+                            {details.expiration && (
+                              <div className="space-y-2">
+                                <div className="flex items-center gap-2">
+                                  <Clock className="h-4 w-4 text-gray-500" />
+                                  <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Expires In</span>
+                                </div>
+                                <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                                  {details.expiration} epochs
+                                </div>
+                              </div>
+                            )}
+
+                            {/* Transaction Hash */}
+                            <div className="space-y-2 sm:col-span-2 lg:col-span-1">
+                              <div className="flex items-center gap-2">
+                                <Hash className="h-4 w-4 text-gray-500" />
+                                <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Transaction</span>
+                              </div>
+                              <div className="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
+                                {details.tx_hash}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                        {/* Abstract - only show if not already visible */}
+                        <div>
+                          <h4 className="text-xs sm:text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Abstract</h4>
+                          <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-300 prose prose-sm sm:prose-base max-w-none prose-headings:text-sm sm:prose-headings:text-base prose-p:text-xs sm:prose-p:text-sm prose-p:my-1 sm:prose-p:my-2">
+                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                              {proposal.json_metadata.body.abstract}
+                            </ReactMarkdown>
+                          </div>
+                        </div>
+
+                        {/* Only show additional details not already visible */}
+                        {proposal.json_metadata.body.motivation && (
+                          <div>
+                            <h4 className="text-xs sm:text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Motivation</h4>
+                            <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-300 prose prose-sm sm:prose-base max-w-none prose-headings:text-sm sm:prose-headings:text-base prose-p:text-xs sm:prose-p:text-sm prose-p:my-1 sm:prose-p:my-2">
+                              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                {proposal.json_metadata.body.motivation}
+                              </ReactMarkdown>
+                            </div>
+                          </div>
+                        )}
+                        {proposal.json_metadata.body.rationale && (
+                          <div>
+                            <h4 className="text-xs sm:text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Rationale</h4>
+                            <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-300 prose prose-sm sm:prose-base max-w-none prose-headings:text-sm sm:prose-headings:text-base prose-p:text-xs sm:prose-p:text-sm prose-p:my-1 sm:prose-p:my-2">
+                              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                {proposal.json_metadata.body.rationale}
+                              </ReactMarkdown>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Voting History */}
+                        {vote && (
+                          <div className="pb-3 border-b border-gray-200 dark:border-gray-700">
+                            <h4 className="text-xs sm:text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Your Vote</h4>
+                            <div className="flex flex-col gap-2">
+                              <VoteBadge voteKind={{
+                                "yes": "Yes" as const,
+                                "no": "No" as const,
+                                "abstain": "Abstain" as const
+                              }[vote.vote]} />
+                              <span className="text-xs text-gray-500 dark:text-gray-400 break-all">
+                                Transaction: {vote.tx_hash.substring(0, 16)}... (cert index: {vote.cert_index})
+                              </span>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Actions */}
+                        <div className="flex flex-col gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+                          <Link
+                            href={`/wallets/${appWallet.id}/governance/proposal/${proposal.tx_hash}:${proposal.cert_index}`}
+                            className="w-full"
+                          >
+                            <Button variant="outline" className="w-full text-sm sm:text-base">
+                              View Full Details
+                            </Button>
+                          </Link>
+                          <Button
+                            variant="default"
+                            className="w-full text-sm bg-green-600 hover:bg-green-700 text-white"
+                            onClick={() => {
+                              setCurrentProposal(proposalId, proposal.json_metadata.body.title);
+                              openModal();
+                            }}
+                          >
+                            <Plus className="mr-2 h-4 w-4" />
+                            Add to Ballot
+                          </Button>
+                          <div className="flex justify-center">
+                            <VoteButton
+                              utxos={utxos}
+                              appWallet={appWallet}
+                              proposalId={proposalId}
+                              proposalTitle={proposal.json_metadata.body.title}
+                              selectedBallotId={selectedBallotId}
+                              proposalDetails={details}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    )}
                   </div>
-                  <VoteButton
-                    utxos={utxos}
-                    appWallet={appWallet}
-                    proposalId={proposal.tx_hash + "#" + proposal.cert_index}
-                    proposalTitle={proposal.json_metadata.body.title}
-                    selectedBallotId={selectedBallotId}
-                  />
-                </div>
-              ))}
+                );
+              })}
             </div>
           </>
         )}
         {hasMore && (
-          <div className="flex flex-row items-center gap-2">
-            <Button variant="outline" onClick={loadMore} disabled={isLoading}>
+          <div className="flex flex-row items-center justify-center gap-2 pt-2 sm:pt-4">
+            <Button 
+              variant="outline" 
+              onClick={loadMore} 
+              disabled={isLoading}
+              className="w-full sm:w-auto text-sm sm:text-base"
+            >
               {isLoading ? "Loading..." : "Load more"}
             </Button>
           </div>
         )}
+        {proposals.length === 0 && !isLoading && (
+          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+            <p className="text-sm sm:text-base">No proposals found.</p>
+          </div>
+        )}
       </div>
     </CardUI>
   );
@@ -294,43 +851,307 @@ function ProposalRow({
   appWallet,
   utxos,
   selectedBallotId,
+  vote,
+  isExpanded,
+  onToggle,
+  details,
+  isLoadingDetails,
+  setCurrentProposal,
+  openModal,
 }: {
   proposal: ProposalMetadata;
   appWallet: Wallet;
   utxos: UTxO[];
   selectedBallotId?: string;
-}) {
+  vote?: VoteRecord;
+  isExpanded?: boolean;
+  onToggle?: () => void;
+  details?: ProposalDetails;
+  isLoadingDetails?: boolean;
+  setCurrentProposal: (proposalId?: string, proposalTitle?: string) => void;
+  openModal: () => void;
+}): JSX.Element {
+  const proposalId = proposal.tx_hash + "#" + proposal.cert_index;
+  
+  // Convert vote to display format
+  const voteDisplay = vote ? {
+    "yes": "Yes" as const,
+    "no": "No" as const,
+    "abstain": "Abstain" as const
+  }[vote.vote] : undefined;
+  
+  return (
+    <>
+      <TableRow 
+        className="hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
+        onClick={onToggle}
+      >
+        <TableCell className="py-3 sm:py-4 w-[40%] align-top">
+          <div className="space-y-2">
+            {/* Title with badge and chevron */}
+            <div className="flex items-start gap-2 min-w-0">
+              <Link
+                href={`/wallets/${appWallet.id}/governance/proposal/${proposal.tx_hash}:${proposal.cert_index}`}
+                className="hover:underline break-words min-w-0 flex-1 text-sm font-medium leading-tight"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {proposal.json_metadata.body.title}
+              </Link>
+              <div className="flex items-center gap-1 flex-shrink-0">
+                {voteDisplay && (
+                  <div onClick={(e) => e.stopPropagation()}>
+                    <VoteBadge voteKind={voteDisplay} />
+                  </div>
+                )}
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onToggle?.();
+                  }}
+                  className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex-shrink-0"
+                  aria-label={isExpanded ? "Collapse proposal" : "Expand proposal"}
+                >
+                  {isExpanded ? (
+                    <ChevronUp className="h-4 w-4 text-gray-400" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4 text-gray-400" />
+                  )}
+                </button>
+              </div>
+            </div>
+            {/* Status, Type and Authors */}
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+              {details && getProposalStatus(details) && (() => {
+                const status = getProposalStatus(details)!;
+                const StatusIcon = status.icon;
+                return (
+                  <div>
+                    <Badge className={`${status.color} flex items-center gap-1 w-fit`}>
+                      <StatusIcon className="h-3 w-3" />
+                      {status.label}
+                    </Badge>
+                  </div>
+                );
+              })()}
+              <div>
+                <span className="font-medium">Type:</span>{" "}
+                <span className="font-semibold">
+                  {proposal.governance_type.split("_").join(" ").toUpperCase()}
+                </span>
+              </div>
+              {proposal.json_metadata.authors.length > 0 && (
+                <div>
+                  <span className="font-medium">Authors:</span>{" "}
+                  <span className="break-words">
+                    {proposal.json_metadata.authors
+                      .map((author: any) => author.name)
+                      .join(", ")}
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        </TableCell>
+        <TableCell className="prose prose-sm max-w-none whitespace-normal break-words text-sm py-3 sm:py-4 w-[45%] align-top">
+          <div className={isExpanded ? "" : "line-clamp-2"}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {proposal.json_metadata.body.abstract}
+            </ReactMarkdown>
+          </div>
+        </TableCell>
+        <TableCell className="py-3 sm:py-4 w-[15%] align-top" onClick={(e) => e.stopPropagation()}>
+          <div className="flex flex-col items-center gap-2 min-w-0">
+            <VoteButton
+              utxos={utxos}
+              appWallet={appWallet}
+              proposalId={proposalId}
+              proposalTitle={proposal.json_metadata.body.title}
+              selectedBallotId={selectedBallotId}
+              proposalDetails={details}
+            />
+          </div>
+        </TableCell>
+      </TableRow>
+      {isExpanded && (
+        <TableRow className="bg-gray-50/50 dark:bg-gray-800/30">
+          <TableCell colSpan={3} className="py-4 px-6">
+            <div className="space-y-4">
+              {/* Proposal Details */}
+              {isLoadingDetails ? (
+                <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 pb-3 border-b border-gray-200 dark:border-gray-700">
+                  <div className="w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin"></div>
+                  Loading details...
+                </div>
+              ) : details && (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 pb-3 border-b border-gray-200 dark:border-gray-700">
+                  {/* Status */}
+                  {getProposalStatus(details) && (() => {
+                    const status = getProposalStatus(details)!;
+                    const StatusIcon = status.icon;
+                    return (
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <Clock className="h-4 w-4 text-gray-500" />
+                          <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Status</span>
+                        </div>
+                        <Badge className={`${status.color} flex items-center gap-1.5 w-fit`}>
+                          <StatusIcon className="h-3 w-3" />
+                          {status.label}
+                        </Badge>
+                      </div>
+                    );
+                  })()}
+
+                  {/* Governance Type */}
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <FileText className="h-4 w-4 text-gray-500" />
+                      <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Type</span>
+                    </div>
+                    <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 capitalize">
+                      {details.governance_type.replace(/_/g, " ")}
+                    </div>
+                  </div>
+
+                  {/* Deposit */}
+                  {details.deposit && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Coins className="h-4 w-4 text-gray-500" />
+                        <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Deposit</span>
+                      </div>
+                      <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                        {(parseInt(details.deposit) / 1_000_000).toFixed(2)} ADA
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Ratified Epoch */}
+                  {details.ratified_epoch && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Calendar className="h-4 w-4 text-gray-500" />
+                        <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Ratified Epoch</span>
+                      </div>
+                      <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                        {details.ratified_epoch}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Enacted Epoch */}
+                  {details.enacted_epoch && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <CheckCircle2 className="h-4 w-4 text-gray-500" />
+                        <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Enacted Epoch</span>
+                      </div>
+                      <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                        {details.enacted_epoch}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Expiration */}
+                  {details.expiration && (
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Clock className="h-4 w-4 text-gray-500" />
+                        <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Expires In</span>
+                      </div>
+                      <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                        {details.expiration} epochs
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Transaction Hash */}
+                  <div className="space-y-2 sm:col-span-2 lg:col-span-1">
+                    <div className="flex items-center gap-2">
+                      <Hash className="h-4 w-4 text-gray-500" />
+                      <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">Transaction</span>
+                    </div>
+                    <div className="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
+                      {details.tx_hash}
+                    </div>
+                  </div>
+                </div>
+              )}
+              {/* Voting History */}
+              {vote && (
+                <div className="pb-3 border-b border-gray-200 dark:border-gray-700">
+                  <h4 className="text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Your Vote</h4>
+                  <div className="flex items-center gap-2">
+                    <VoteBadge voteKind={voteDisplay!} />
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      Transaction: {vote.tx_hash.substring(0, 16)}... (cert index: {vote.cert_index})
+                    </span>
+                  </div>
+                </div>
+              )}
+              {/* Show full abstract in expanded view */}
+              <div>
+                <h4 className="text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Abstract</h4>
+                <div className="text-sm text-gray-600 dark:text-gray-400 prose prose-sm max-w-none">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {proposal.json_metadata.body.abstract}
+                  </ReactMarkdown>
+                </div>
+              </div>
+              <div className="pt-2 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row gap-2">
+                <Button
+                  variant="default"
+                  className="w-full sm:w-auto text-sm bg-green-600 hover:bg-green-700 text-white"
+                  onClick={() => {
+                    setCurrentProposal(proposalId, proposal.json_metadata.body.title);
+                    openModal();
+                  }}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Add to Ballot
+                </Button>
+                <Link href={`/wallets/${appWallet.id}/governance/proposal/${proposal.tx_hash}:${proposal.cert_index}`}>
+                  <Button variant="default" className="w-full sm:w-auto text-sm">
+                    View Full Proposal
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+}
+
+function VoteBadge({ voteKind }: { voteKind: "Yes" | "No" | "Abstain" }) {
+  const config = {
+    Yes: {
+      icon: CheckCircle2,
+      variant: "default" as const,
+      className: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800",
+    },
+    No: {
+      icon: XCircle,
+      variant: "destructive" as const,
+      className: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800",
+    },
+    Abstain: {
+      icon: MinusCircle,
+      variant: "secondary" as const,
+      className: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300 border-gray-200 dark:border-gray-700",
+    },
+  };
+
+  const { icon: Icon, className } = config[voteKind];
+
   return (
-    <TableRow>
-      <TableCell className="font-medium">
-        <Link
-          href={`/wallets/${appWallet.id}/governance/proposal/${proposal.tx_hash}:${proposal.cert_index}`}
-        >
-          {proposal.json_metadata.body.title}
-        </Link>
-      </TableCell>
-      <TableCell>
-        {proposal.json_metadata.authors
-          .map((author: any) => author.name)
-          .join(", ")}
-      </TableCell>
-  <TableCell className="prose w-[70%] max-w-4xl whitespace-normal break-words">
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>
-          {proposal.json_metadata.body.abstract}
-        </ReactMarkdown>
-      </TableCell>
-      <TableCell>
-        {proposal.governance_type.split("_").join(" ").toUpperCase()}
-      </TableCell>
-      <TableCell>
-        <VoteButton
-          utxos={utxos}
-          appWallet={appWallet}
-          proposalId={proposal.tx_hash + "#" + proposal.cert_index}
-          proposalTitle={proposal.json_metadata.body.title}
-          selectedBallotId={selectedBallotId}
-        />
-      </TableCell>
-    </TableRow>
+    <Badge
+      variant="outline"
+      className={`flex items-center gap-1 text-xs ${className}`}
+    >
+      <Icon className="h-3 w-3" />
+      <span>{voteKind}</span>
+    </Badge>
   );
 }
\ No newline at end of file
diff --git a/src/components/pages/wallet/governance/vote-card.tsx b/src/components/pages/wallet/governance/vote-card.tsx
index 9d781816..baa4dfdd 100644
--- a/src/components/pages/wallet/governance/vote-card.tsx
+++ b/src/components/pages/wallet/governance/vote-card.tsx
@@ -14,7 +14,6 @@ interface VoteCardProps {
   proposalId?: string; // Optional proposalId
   selectedBallotId?: string;
   proposalTitle?: string;
-  onOpenBallotSidebar?: () => void;
 }
 
 export default function VoteCard({
@@ -23,7 +22,6 @@ export default function VoteCard({
   proposalId,
   selectedBallotId,
   proposalTitle,
-  onOpenBallotSidebar,
 }: VoteCardProps) {
   const drepInfo = useWalletsStore((state) => state.drepInfo);
   const [localProposalId, setLocalProposalId] = useState<string>(proposalId ?? "");
@@ -32,15 +30,15 @@ export default function VoteCard({
 
   return (
     <CardUI title="Vote for proposal" description="" cardClassName="col-span-2">
-      <fieldset className="grid gap-6">
+      <fieldset className="grid gap-4 sm:gap-6">
         {/* Conditionally show the Proposal ID input if no proposalId prop is provided */}
         {!proposalId && (
-          <div className="grid gap-3">
-            <Label htmlFor="proposal-id">Proposal ID (i.e. hash#0)</Label>
+          <div className="grid gap-2 sm:gap-3">
+            <Label htmlFor="proposal-id" className="text-sm sm:text-base">Proposal ID (i.e. hash#0)</Label>
             <Input
               id="proposal-id"
               type="text"
-              className="w-full"
+              className="w-full text-sm sm:text-base"
               placeholder="e.g. 7fd6429add8f2611ad8d48c0cc49101463093aec285faea402e8cfde78ea58d7#0"
               value={localProposalId}
               onChange={(e) => setLocalProposalId(e.target.value)}
@@ -48,21 +46,21 @@ export default function VoteCard({
           </div>
         )}
 
-        <div className="grid gap-3">
-          <Label htmlFor="description">Description</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label htmlFor="description" className="text-sm sm:text-base">Description</Label>
           <Input
             id="description"
-            className="w-full"
+            className="w-full text-sm sm:text-base"
             placeholder="What you are voting for"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
           />
         </div>
-        <div className="grid gap-3">
-          <Label htmlFor="metadata">On-chain Metadata (optional)</Label>
+        <div className="grid gap-2 sm:gap-3">
+          <Label htmlFor="metadata" className="text-sm sm:text-base">On-chain Metadata (optional)</Label>
           <Textarea
             id="metadata"
-            className="w-full"
+            className="w-full text-sm sm:text-base min-h-[80px] sm:min-h-[100px]"
             placeholder="Rational or link to content"
             value={metadata}
             onChange={(e) => setMetadata(e.target.value)}
@@ -70,12 +68,12 @@ export default function VoteCard({
         </div>
 
         {!drepInfo?.active && (
-          <p className="text-sm text-muted-foreground">
+          <p className="text-xs sm:text-sm text-muted-foreground">
             * Please register DRep before creating a vote transaction
           </p>
         )}
 
-        <div className="flex gap-4">
+        <div className="flex gap-2 sm:gap-4">
           <VoteButton
             appWallet={appWallet}
             proposalId={proposalId ?? localProposalId}
@@ -84,7 +82,6 @@ export default function VoteCard({
             utxos={utxos}
             selectedBallotId={selectedBallotId}
             proposalTitle={proposalTitle}
-            onOpenBallotSidebar={onOpenBallotSidebar}
           />
         </div>
       </fieldset>
diff --git a/src/components/ui/card-content.tsx b/src/components/ui/card-content.tsx
index bf3f759c..9dcd787e 100644
--- a/src/components/ui/card-content.tsx
+++ b/src/components/ui/card-content.tsx
@@ -17,26 +17,26 @@ export default function CardUI({
   headerDom?: ReactNode;
 }) {
   return (
-    <Card className={`self-start ${cardClassName}`}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-xl font-medium">{title}</CardTitle>
-        {headerDom && headerDom}
+    <Card className={`self-start w-full ${cardClassName}`}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 px-4 sm:px-6 pt-4 sm:pt-6">
+        <CardTitle className="text-lg sm:text-xl font-medium pr-2">{title}</CardTitle>
+        {headerDom && <div className="flex-shrink-0">{headerDom}</div>}
         {icon && (
           <>
             {typeof icon === "string" ? (
-              <div className="h-4 w-4 text-muted-foreground">{icon}</div>
+              <div className="h-4 w-4 text-muted-foreground flex-shrink-0">{icon}</div>
             ) : (
               React.createElement(icon, {
-                className: "h-4 w-4 text-muted-foreground",
+                className: "h-4 w-4 text-muted-foreground flex-shrink-0",
               })
             )}
           </>
         )}
       </CardHeader>
-      <CardContent>
+      <CardContent className="px-4 sm:px-6 pb-4 sm:pb-6">
         <div className="mt-1 flex flex-col gap-2">
           {description && (
-            <p className="text-sm text-muted-foreground">{description}</p>
+            <p className="text-xs sm:text-sm text-muted-foreground">{description}</p>
           )}
           <div className="mt-1 flex flex-col gap-2">{children}</div>
         </div>
diff --git a/src/env.js b/src/env.js
index 13a22974..77893add 100644
--- a/src/env.js
+++ b/src/env.js
@@ -11,7 +11,7 @@ export const env = createEnv({
     NODE_ENV: z
       .enum(["development", "test", "production"])
       .default("development"),
-    BLOB_READ_WRITE_TOKEN: z.string(),
+    PINATA_JWT: z.string(),
     GITHUB_TOKEN: z.string(),
     JWT_SECRET: z.string().min(32),
     // NEXTAUTH_SECRET:
@@ -54,7 +54,7 @@ export const env = createEnv({
       process.env.NEXT_PUBLIC_BLOCKFROST_API_KEY_MAINNET,
     NEXT_PUBLIC_BLOCKFROST_API_KEY_PREPROD:
       process.env.NEXT_PUBLIC_BLOCKFROST_API_KEY_PREPROD,
-    BLOB_READ_WRITE_TOKEN: process.env.BLOB_READ_WRITE_TOKEN,
+    PINATA_JWT: process.env.PINATA_JWT,
     GITHUB_TOKEN: process.env.GITHUB_TOKEN,
     JWT_SECRET: process.env.JWT_SECRET,
   },
diff --git a/src/hooks/useBallotModal.tsx b/src/hooks/useBallotModal.tsx
new file mode 100644
index 00000000..e4ee7892
--- /dev/null
+++ b/src/hooks/useBallotModal.tsx
@@ -0,0 +1,54 @@
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface BallotModalContextType {
+  isOpen: boolean;
+  openModal: () => void;
+  closeModal: () => void;
+  currentProposalId?: string;
+  currentProposalTitle?: string;
+  setCurrentProposal: (proposalId?: string, proposalTitle?: string) => void;
+}
+
+const BallotModalContext = createContext<BallotModalContextType | undefined>(undefined);
+
+export function BallotModalProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentProposalId, setCurrentProposalId] = useState<string | undefined>();
+  const [currentProposalTitle, setCurrentProposalTitle] = useState<string | undefined>();
+
+  const openModal = () => setIsOpen(true);
+  const closeModal = () => {
+    setIsOpen(false);
+    // Clear proposal context when closing
+    setCurrentProposalId(undefined);
+    setCurrentProposalTitle(undefined);
+  };
+
+  const setCurrentProposal = (proposalId?: string, proposalTitle?: string) => {
+    setCurrentProposalId(proposalId);
+    setCurrentProposalTitle(proposalTitle);
+  };
+
+  return (
+    <BallotModalContext.Provider
+      value={{
+        isOpen,
+        openModal,
+        closeModal,
+        currentProposalId,
+        currentProposalTitle,
+        setCurrentProposal,
+      }}
+    >
+      {children}
+    </BallotModalContext.Provider>
+  );
+}
+
+export function useBallotModal() {
+  const context = useContext(BallotModalContext);
+  if (context === undefined) {
+    throw new Error("useBallotModal must be used within a BallotModalProvider");
+  }
+  return context;
+}
diff --git a/src/lib/zustand/proxy.ts b/src/lib/zustand/proxy.ts
index e537a819..2f8dc102 100644
--- a/src/lib/zustand/proxy.ts
+++ b/src/lib/zustand/proxy.ts
@@ -229,7 +229,33 @@ export const useProxyStore = create<ProxyState>()(
           );
           proxyContract.proxyAddress = proxyAddress;
           
-          // Get delegators info
+          // Check if DRep is registered before fetching delegators
+          const drepStatus = await proxyContract.getDrepStatus(forceRefresh);
+          if (!drepStatus || drepStatus === null) {
+            // DRep is not registered, set empty delegators info and return early
+            const emptyDelegatorsInfo: ProxyDelegatorsInfo = {
+              delegators: [],
+              totalDelegation: "0",
+              totalDelegationADA: 0,
+              count: 0
+            };
+            
+            const currentState = get();
+            const updatedProxies = currentState.proxies[walletId]?.map(proxy => 
+              proxy.id === proxyId 
+                ? { ...proxy, delegatorsInfo: emptyDelegatorsInfo, lastUpdated: Date.now() }
+                : proxy
+            ) || [];
+            
+            set((state) => ({
+              proxies: { ...state.proxies, [walletId]: updatedProxies },
+              drepLoading: { ...state.drepLoading, [proxyId]: false },
+              drepErrors: { ...state.drepErrors, [proxyId]: null },
+            }));
+            return;
+          }
+          
+          // Get delegators info (only if DRep is registered)
           const delegatorsInfo = await proxyContract.getDrepDelegators(forceRefresh) as ProxyDelegatorsInfo;
           
           // Update the specific proxy's delegators data
@@ -300,13 +326,32 @@ export const useProxyStore = create<ProxyState>()(
               );
               proxyContract.proxyAddress = proxy.proxyAddress;
               
-              // Fetch all data for this proxy in parallel
-              const [balance, drepStatus, delegators] = await Promise.allSettled([
+              // Fetch balance and DRep status first
+              const [balance, drepStatus] = await Promise.allSettled([
                 proxyContract.getProxyBalance(),
                 proxyContract.getDrepStatus(forceRefresh),
-                proxyContract.getDrepDelegators(forceRefresh),
               ]);
               
+              // Only fetch delegators if DRep is registered
+              let delegators: PromiseSettledResult<ProxyDelegatorsInfo>;
+              if (drepStatus.status === 'fulfilled' && drepStatus.value !== null) {
+                const delegatorsResult = await Promise.allSettled([
+                  proxyContract.getDrepDelegators(forceRefresh),
+                ]);
+                delegators = delegatorsResult[0] as PromiseSettledResult<ProxyDelegatorsInfo>;
+              } else {
+                // DRep not registered, create empty delegators result
+                delegators = {
+                  status: 'fulfilled' as const,
+                  value: {
+                    delegators: [],
+                    totalDelegation: "0",
+                    totalDelegationADA: 0,
+                    count: 0
+                  }
+                } as PromiseSettledResult<ProxyDelegatorsInfo>;
+              }
+              
               // Get DRep ID
               const drepId = proxyContract.getDrepId();
               
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 00000000..e0c8c84b
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,58 @@
+import { useRouter } from "next/router";
+import { FileQuestion, Home, ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Link from "next/link";
+
+export default function Custom404() {
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full min-h-[400px] px-4">
+      <Card className="w-full max-w-md border-zinc-200 dark:border-zinc-800 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-sm shadow-lg">
+        <CardContent className="flex flex-col items-center text-center p-8 space-y-6">
+          <div className="relative">
+            <div className="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 rounded-full blur-xl" />
+            <div className="relative flex items-center justify-center w-20 h-20 rounded-full bg-blue-50 dark:bg-blue-950/30 border-2 border-blue-200 dark:border-blue-900/50">
+              <FileQuestion className="w-10 h-10 text-blue-600 dark:text-blue-400" />
+            </div>
+          </div>
+          
+          <div className="space-y-2">
+            <h1 className="text-4xl font-bold text-zinc-900 dark:text-zinc-50">
+              404
+            </h1>
+            <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50">
+              Page Not Found
+            </h2>
+            <p className="text-sm text-zinc-600 dark:text-zinc-400 max-w-sm">
+              The page you're looking for doesn't exist or has been moved.
+            </p>
+          </div>
+          
+          <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+            <Button
+              onClick={() => router.back()}
+              variant="outline"
+              className="w-full sm:w-auto min-w-[140px]"
+              size="lg"
+            >
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+            <Link href="/" className="w-full sm:w-auto">
+              <Button
+                className="w-full sm:w-auto min-w-[140px]"
+                size="lg"
+              >
+                <Home className="mr-2 h-4 w-4" />
+                Go Home
+              </Button>
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
diff --git a/src/pages/api/pinata-storage/image/exists.ts b/src/pages/api/pinata-storage/image/exists.ts
new file mode 100644
index 00000000..027694d2
--- /dev/null
+++ b/src/pages/api/pinata-storage/image/exists.ts
@@ -0,0 +1,53 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { env } from "@/env";
+
+interface PinataListResponse {
+  data: {
+    files: Array<{
+      id: string;
+      name: string;
+      cid: string;
+      size: number;
+      mime_type: string;
+      created_at: string;
+    }>;
+    total_count: number;
+  };
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "GET") {
+    res.status(405).json({ error: "Method not allowed" });
+    return;
+  }
+
+  const { shortHash } = req.query;
+  if (!shortHash || typeof shortHash !== "string") {
+    res.status(400).json({ error: "shortHash is required" });
+    return;
+  }
+
+  try {
+    // Pinata doesn't have a direct "exists" API, so we'll search for files
+    // Since we can't search by hash directly, we'll need to list files
+    // For now, we'll use a workaround: try to get file info by attempting to list
+    // In a production system, you might want to maintain a mapping of shortHash -> CID
+    
+    // Note: Pinata's list API requires pagination and doesn't support searching by hash
+    // For this implementation, we'll return false and let the client handle upload
+    // In a real scenario, you might want to:
+    // 1. Store shortHash -> CID mappings in a database
+    // 2. Use Pinata's metadata search if available
+    // 3. Or skip the existence check and rely on IPFS deduplication
+    
+    // For now, return false to allow upload (IPFS will handle deduplication via CID)
+    return res.status(200).json({ exists: false });
+  } catch (error) {
+    console.error("Error checking file existence:", error);
+    return res.status(500).json({ 
+      error: "Error checking file existence", 
+      details: error instanceof Error ? error.message : String(error)
+    });
+  }
+}
+
diff --git a/src/pages/api/pinata-storage/image/put.ts b/src/pages/api/pinata-storage/image/put.ts
new file mode 100644
index 00000000..fe0906c5
--- /dev/null
+++ b/src/pages/api/pinata-storage/image/put.ts
@@ -0,0 +1,127 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { env } from "@/env";
+import formidable, { Fields, Files, File } from "formidable";
+import fs from "fs";
+
+export const config = {
+  api: {
+    bodyParser: false, // Required for file uploads
+  },
+};
+
+interface PinataResponse {
+  data: {
+    id: string;
+    name: string;
+    cid: string;
+    size: number;
+    number_of_files: number;
+    mime_type: string;
+    group_id: string | null;
+  };
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Method not allowed" });
+  }
+
+  try {
+    const form = formidable({ multiples: false });
+    const parseForm = (): Promise<{ fields: Fields; files: Files }> =>
+      new Promise((resolve, reject) => {
+        form.parse(req, (err, fields, files) => {
+          if (err) {
+            return reject(
+              new Error(
+                err instanceof Error ? err.message : "Form parsing error",
+              ),
+            );
+          }
+          resolve({ fields, files });
+        });
+      });
+
+    const { fields, files } = await parseForm();
+
+    if (!files.file || !files.file[0]) {
+      return res.status(400).json({ error: "No file uploaded" });
+    }
+
+    const file: File = Array.isArray(files.file) ? files.file[0] : files.file;
+    
+    // Validate and retrieve form fields
+    const rawShortHash = Array.isArray(fields.shortHash)
+      ? fields.shortHash[0]
+      : fields.shortHash;
+      
+    if (!rawShortHash || typeof rawShortHash !== "string") {
+      return res.status(400).json({ error: "shortHash is required" });
+    }
+    const shortHash = rawShortHash;
+
+    const rawFilename = Array.isArray(fields.filename)
+      ? fields.filename[0]
+      : fields.filename;
+    if (!rawFilename || typeof rawFilename !== "string") {
+      return res.status(400).json({ error: "filename is required" });
+    }
+    const filename = rawFilename;
+
+    // Read file as buffer
+    const fileBuffer = fs.readFileSync(file.filepath);
+    const contentType =
+      typeof file.mimetype === "string"
+        ? file.mimetype
+        : "application/octet-stream";
+
+    // Create Blob for Pinata upload
+    const fileBlob = new Blob([fileBuffer], { type: contentType });
+
+    // Create FormData for Pinata upload
+    const formData = new FormData();
+    formData.append("file", fileBlob, filename);
+    formData.append("network", "public");
+
+    // Upload to Pinata
+    const pinataResponse = await fetch("https://uploads.pinata.cloud/v3/files", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${env.PINATA_JWT}`,
+      },
+      body: formData,
+    });
+
+    if (!pinataResponse.ok) {
+      const errorText = await pinataResponse.text();
+      console.error("Pinata upload error:", errorText);
+      return res.status(pinataResponse.status).json({ 
+        error: "Pinata upload failed", 
+        details: errorText 
+      });
+    }
+
+    const pinataData = (await pinataResponse.json()) as PinataResponse;
+    
+    // Construct IPFS gateway URL using public IPFS gateway
+    const ipfsUrl = `https://ipfs.io/ipfs/${pinataData.data.cid}`;
+
+    return res.status(200).json({ 
+      url: ipfsUrl,
+      cid: pinataData.data.cid,
+      id: pinataData.data.id,
+    });
+  } catch (err) {
+    console.error("File upload error:", err);
+    return res
+      .status(500)
+      .json({ 
+        error: "Internal Server Error", 
+        details: err instanceof Error ? err.message : String(err)
+      });
+  }
+}
+
diff --git a/src/pages/api/pinata-storage/put.ts b/src/pages/api/pinata-storage/put.ts
new file mode 100644
index 00000000..cc04b386
--- /dev/null
+++ b/src/pages/api/pinata-storage/put.ts
@@ -0,0 +1,79 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { env } from "@/env";
+
+interface PinataResponse {
+  data: {
+    id: string;
+    name: string;
+    cid: string;
+    size: number;
+    number_of_files: number;
+    mime_type: string;
+    group_id: string | null;
+  };
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Method not allowed" });
+  }
+
+  try {
+    const pathname = req.body.pathname as string;
+    const value = req.body.value as string;
+
+    if (!pathname || !value) {
+      return res.status(400).json({ error: "pathname and value are required" });
+    }
+
+    // Extract just the filename from pathname (remove folder structure)
+    const filename = pathname.split("/").pop() || pathname;
+
+    // Create FormData for Pinata upload
+    // In Node.js 18+, FormData is available globally
+    const formData = new FormData();
+    const buffer = Buffer.from(value, "utf-8");
+    const blob = new Blob([buffer], { type: "application/ld+json" });
+    formData.append("file", blob, filename);
+    formData.append("network", "public");
+
+    // Upload to Pinata
+    const pinataResponse = await fetch("https://uploads.pinata.cloud/v3/files", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${env.PINATA_JWT}`,
+      },
+      body: formData,
+    });
+
+    if (!pinataResponse.ok) {
+      const errorText = await pinataResponse.text();
+      console.error("Pinata upload error:", errorText);
+      return res.status(pinataResponse.status).json({ 
+        error: "Pinata upload failed", 
+        details: errorText 
+      });
+    }
+
+    const pinataData = (await pinataResponse.json()) as PinataResponse;
+    
+    // Construct IPFS gateway URL using public IPFS gateway
+    const ipfsUrl = `https://ipfs.io/ipfs/${pinataData.data.cid}`;
+
+    res.status(200).json({ 
+      url: ipfsUrl,
+      cid: pinataData.data.cid,
+      id: pinataData.data.id,
+    });
+  } catch (error) {
+    console.error("Error uploading to Pinata:", error);
+    res.status(500).json({ 
+      error: "Internal server error", 
+      details: error instanceof Error ? error.message : String(error)
+    });
+  }
+}
+
diff --git a/src/pages/api/vercel-storage/image/exists.ts b/src/pages/api/vercel-storage/image/exists.ts
index e36da676..33658662 100644
--- a/src/pages/api/vercel-storage/image/exists.ts
+++ b/src/pages/api/vercel-storage/image/exists.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { list } from "@vercel/blob";
+// import { list } from "@vercel/blob";
 import { env } from "@/env";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -18,24 +18,27 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const directory = `img/${shortHash}/`;
 
   try {
-    // List only blobs under the specified directory
-    const response = await list({ prefix: directory, token: env.BLOB_READ_WRITE_TOKEN });
-    if (response.blobs && response.blobs.length > 0) {
-      const blob = response.blobs[0];
-      if (blob && blob.downloadUrl) {
-        const urlString: string = blob.downloadUrl;
-        let cleanUrl: string = urlString; // initialize with a fallback value
-        try {
-          const urlObj = new URL(urlString);
-          urlObj.search = "";
-          cleanUrl = urlObj.toString();
-        } catch (e) {
-          console.error(e);
-        }
-        return res.status(200).json({ exists: true, url: cleanUrl });
-      }
-    }
+    // Vercel blob storage is not currently configured
+    // Return false to indicate file doesn't exist
     return res.status(200).json({ exists: false });
+    // List only blobs under the specified directory
+    // const response = await list({ prefix: directory, token: env.BLOB_READ_WRITE_TOKEN });
+    // if (response.blobs && response.blobs.length > 0) {
+    //   const blob = response.blobs[0];
+    //   if (blob && blob.downloadUrl) {
+    //     const urlString: string = blob.downloadUrl;
+    //     let cleanUrl: string = urlString; // initialize with a fallback value
+    //     try {
+    //       const urlObj = new URL(urlString);
+    //       urlObj.search = "";
+    //       cleanUrl = urlObj.toString();
+    //     } catch (e) {
+    //       console.error(e);
+    //     }
+    //     return res.status(200).json({ exists: true, url: cleanUrl });
+    //   }
+    // }
+    // return res.status(200).json({ exists: false });
   } catch (error) {
     console.error("Error listing files:", error);
     return res.status(500).json({ error: "Error listing files", details: error });
diff --git a/src/pages/api/vercel-storage/image/put.ts b/src/pages/api/vercel-storage/image/put.ts
index c3d54ab0..5807a79a 100644
--- a/src/pages/api/vercel-storage/image/put.ts
+++ b/src/pages/api/vercel-storage/image/put.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { put } from "@vercel/blob";
+// import { put } from "@vercel/blob";
 import fs from "fs";
 import { env } from "@/env";
 import formidable, { Fields, Files, File } from "formidable";
@@ -69,13 +69,16 @@ export default async function handler(
         ? file.mimetype
         : "application/octet-stream";
 
-    const response = await put(storagePath, fileStream, {
-      access: "public",
-      token: env.BLOB_READ_WRITE_TOKEN,
-      contentType,
-    });
+    // Vercel blob storage is not currently configured
+    return res.status(501).json({ error: "Vercel blob storage not configured" });
+    
+    // const response = await put(storagePath, fileStream, {
+    //   access: "public",
+    //   token: env.BLOB_READ_WRITE_TOKEN,
+    //   contentType,
+    // });
 
-    return res.status(200).json({ url: response.url });
+    // return res.status(200).json({ url: response.url });
   } catch (err) {
     console.error("File upload error:", err);
     return res
diff --git a/src/pages/api/vercel-storage/put.ts b/src/pages/api/vercel-storage/put.ts
index 91d9f76d..6565fdb2 100644
--- a/src/pages/api/vercel-storage/put.ts
+++ b/src/pages/api/vercel-storage/put.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { put } from "@vercel/blob";
+// import { put } from "@vercel/blob";
 import { env } from "@/env";
 
 export default async function handler(
@@ -7,15 +7,18 @@ export default async function handler(
   res: NextApiResponse,
 ) {
   try {
-    const pathname = req.body.pathname;
-    const value = req.body.value;
+    // Vercel blob storage is not currently configured
+    return res.status(501).json({ error: "Vercel blob storage not configured" });
+    
+    // const pathname = req.body.pathname;
+    // const value = req.body.value;
 
-    const response = await put(pathname, value, {
-      access: "public",
-      token: env.BLOB_READ_WRITE_TOKEN,
-    });
+    // const response = await put(pathname, value, {
+    //   access: "public",
+    //   token: env.BLOB_READ_WRITE_TOKEN,
+    // });
 
-    res.status(200).json({ url: response.url });
+    // res.status(200).json({ url: response.url });
   } catch (error) {
     res.status(500).json({ error: error });
   }
diff --git a/src/pages/wallets/[wallet]/governance/register/index.tsx b/src/pages/wallets/[wallet]/governance/register/index.tsx
index 19f359e4..77d32ebc 100644
--- a/src/pages/wallets/[wallet]/governance/register/index.tsx
+++ b/src/pages/wallets/[wallet]/governance/register/index.tsx
@@ -1,5 +1,9 @@
 import CardRegister from "@/components/pages/wallet/governance/drep/registerDrep";
 
 export default function PageWalletGovernanceRegister() {
-  return <CardRegister />;
+  return (
+    <main className="flex flex-1 flex-col gap-4 p-3 sm:p-4 md:gap-6 lg:gap-8 lg:p-8 max-w-7xl mx-auto w-full">
+      <CardRegister />
+    </main>
+  );
 }
diff --git a/src/pages/wallets/[wallet]/governance/update/index.tsx b/src/pages/wallets/[wallet]/governance/update/index.tsx
index b8755e85..0c8def63 100644
--- a/src/pages/wallets/[wallet]/governance/update/index.tsx
+++ b/src/pages/wallets/[wallet]/governance/update/index.tsx
@@ -1,5 +1,9 @@
 import CardUpdate from "@/components/pages/wallet/governance/drep/updateDrep";
 
 export default function PageWalletGovernanceUpdate() {
-  return <CardUpdate />;
+  return (
+    <main className="flex flex-1 flex-col gap-4 p-3 sm:p-4 md:gap-6 lg:gap-8 lg:p-8 max-w-7xl mx-auto w-full">
+      <CardUpdate />
+    </main>
+  );
 }
diff --git a/src/server/api/routers/ballot.ts b/src/server/api/routers/ballot.ts
index 725fda71..864d0390 100644
--- a/src/server/api/routers/ballot.ts
+++ b/src/server/api/routers/ballot.ts
@@ -77,6 +77,8 @@ export const ballotRouter = createTRPCRouter({
         itemDescription: z.string(),
         item: z.string(),
         choice: z.string(),
+        anchorUrl: z.string().optional(),
+        anchorHash: z.string().optional(),
       }),
     )
     .mutation(async ({ ctx, input }) => {
@@ -87,19 +89,32 @@ export const ballotRouter = createTRPCRouter({
       if (!ballot) {
         throw new Error("Ballot not found");
       }
+      // Check if proposal already exists to prevent duplicates
+      if (Array.isArray(ballot.items) && ballot.items.includes(input.item)) {
+        throw new Error("Proposal already exists in this ballot");
+      }
       // Append to arrays, initialize if undefined
       const updatedItems = Array.isArray(ballot.items) ? [...ballot.items, input.item] : [input.item];
       const updatedItemDescriptions = Array.isArray(ballot.itemDescriptions)
         ? [...ballot.itemDescriptions, input.itemDescription]
         : [input.itemDescription];
       const updatedChoices = Array.isArray(ballot.choices) ? [...ballot.choices, input.choice] : [input.choice];
+      const ballotWithAnchors = ballot as typeof ballot & { anchorUrls?: string[]; anchorHashes?: string[] };
+      const updatedAnchorUrls = Array.isArray(ballotWithAnchors.anchorUrls) 
+        ? [...ballotWithAnchors.anchorUrls, input.anchorUrl || ""]
+        : [input.anchorUrl || ""];
+      const updatedAnchorHashes = Array.isArray(ballotWithAnchors.anchorHashes)
+        ? [...ballotWithAnchors.anchorHashes, input.anchorHash || ""]
+        : [input.anchorHash || ""];
       return ctx.db.ballot.update({
         where: { id: input.ballotId },
         data: {
           items: updatedItems,
           itemDescriptions: updatedItemDescriptions,
           choices: updatedChoices,
-        },
+          anchorUrls: updatedAnchorUrls,
+          anchorHashes: updatedAnchorHashes,
+        } as any,
       });
     }),
       removeProposalFromBallot: publicProcedure
@@ -118,6 +133,7 @@ export const ballotRouter = createTRPCRouter({
         throw new Error("Ballot not found");
       }
       // Remove the item at the given index from all arrays
+      const ballotWithAnchors = ballot as typeof ballot & { anchorUrls?: string[]; anchorHashes?: string[] };
       const updatedItems = Array.isArray(ballot.items)
         ? ballot.items.filter((_, i) => i !== input.index)
         : [];
@@ -127,13 +143,21 @@ export const ballotRouter = createTRPCRouter({
       const updatedChoices = Array.isArray(ballot.choices)
         ? ballot.choices.filter((_, i) => i !== input.index)
         : [];
+      const updatedAnchorUrls = Array.isArray(ballotWithAnchors.anchorUrls)
+        ? ballotWithAnchors.anchorUrls.filter((_: string, i: number) => i !== input.index)
+        : [];
+      const updatedAnchorHashes = Array.isArray(ballotWithAnchors.anchorHashes)
+        ? ballotWithAnchors.anchorHashes.filter((_: string, i: number) => i !== input.index)
+        : [];
       return ctx.db.ballot.update({
         where: { id: input.ballotId },
         data: {
           items: updatedItems,
           itemDescriptions: updatedItemDescriptions,
           choices: updatedChoices,
-        },
+          anchorUrls: updatedAnchorUrls,
+          anchorHashes: updatedAnchorHashes,
+        } as any,
       });
     }),
 
@@ -159,4 +183,49 @@ export const ballotRouter = createTRPCRouter({
         data: { choices: updatedChoices },
       });
     }),
+
+  updateProposalAnchor: publicProcedure
+    .input(
+      z.object({
+        ballotId: z.string(),
+        index: z.number(),
+        anchorUrl: z.string().optional(),
+        anchorHash: z.string().optional(),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const ballot = await ctx.db.ballot.findUnique({
+        where: { id: input.ballotId },
+      });
+      if (!ballot) throw new Error("Ballot not found");
+      if (!Array.isArray(ballot.items) || ballot.items.length <= input.index)
+        throw new Error("Invalid proposal index");
+      
+      const ballotWithAnchors = ballot as any;
+      const updatedAnchorUrls = Array.isArray(ballotWithAnchors.anchorUrls) 
+        ? [...ballotWithAnchors.anchorUrls]
+        : Array(ballot.items.length).fill("");
+      const updatedAnchorHashes = Array.isArray(ballotWithAnchors.anchorHashes)
+        ? [...ballotWithAnchors.anchorHashes]
+        : Array(ballot.items.length).fill("");
+      
+      // Ensure arrays are the right length
+      while (updatedAnchorUrls.length < ballot.items.length) {
+        updatedAnchorUrls.push("");
+      }
+      while (updatedAnchorHashes.length < ballot.items.length) {
+        updatedAnchorHashes.push("");
+      }
+      
+      updatedAnchorUrls[input.index] = input.anchorUrl || "";
+      updatedAnchorHashes[input.index] = input.anchorHash || "";
+      
+      return ctx.db.ballot.update({
+        where: { id: input.ballotId },
+        data: {
+          anchorUrls: updatedAnchorUrls,
+          anchorHashes: updatedAnchorHashes,
+        } as any,
+      });
+    }),
 });
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 220e7c9e..132482de 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -273,12 +273,15 @@ header.border-b {
 }
 
 /* Mobile Signer Cards - very subtle borders */
-.add-wallet-glass-page .sm\\:hidden .border {
-  border-color: rgba(0, 0, 0, 0.06) !important; /* Light mode - more subtle */
-}
+/* Target elements that are only visible on mobile (below sm breakpoint) */
+@media (max-width: 639px) {
+  .add-wallet-glass-page [class*="border"] {
+    border-color: rgba(0, 0, 0, 0.06) !important; /* Light mode - more subtle */
+  }
 
-.dark .add-wallet-glass-page .sm\\:hidden .border {
-  border-color: rgba(255, 255, 255, 0.01) !important; /* Dark mode - barely visible */
+  .dark .add-wallet-glass-page [class*="border"] {
+    border-color: rgba(255, 255, 255, 0.01) !important; /* Dark mode - barely visible */
+  }
 }
 
 /**
diff --git a/src/types/governance.ts b/src/types/governance.ts
index 34fe2553..3cc72fd5 100644
--- a/src/types/governance.ts
+++ b/src/types/governance.ts
@@ -8,6 +8,11 @@ export type ProposalMetadata = {
       abstract: string;
       motivation: string;
       rationale: string;
+      references?: Array<{
+        "@type": string;
+        label: string;
+        uri: string;
+      }>;
     };
     authors: {
       name: string;
@@ -18,6 +23,35 @@ export type ProposalMetadata = {
   governance_type: string;
 };
 
+export type ProposalDetails = {
+  id: string;
+  tx_hash: string;
+  cert_index: number;
+  governance_type: string;
+  deposit: string;
+  return_address: string;
+  governance_description: {
+    tag: string;
+  };
+  ratified_epoch: number | null;
+  enacted_epoch: number | null;
+  dropped_epoch: number | null;
+  expired_epoch: number | null;
+  expiration: number | null;
+};
+
+export type ProposalParameters = {
+  id: string;
+  tx_hash: string;
+  cert_index: number;
+  parameters: Record<string, any>;
+};
+
+export type ProposalWithdrawal = {
+  stake_address: string;
+  amount: string;
+};
+
 export type BlockfrostDrepInfo = {
   drep_id: string;
   hex: string;
diff --git a/tsconfig.json b/tsconfig.json
index 2c577e1f..010f0d82 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,25 +8,32 @@
     "resolveJsonModule": true,
     "moduleDetection": "force",
     "isolatedModules": true,
-
     /* Strictness */
     "strict": true,
     "noUncheckedIndexedAccess": true,
     "checkJs": true,
-
     /* Bundled projects */
-    "lib": ["dom", "dom.iterable", "ES2022"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2022"
+    ],
     "noEmit": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "jsx": "preserve",
-    "plugins": [{ "name": "next" }],
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "incremental": true,
-
     /* Path Aliases */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
   "include": [
@@ -37,5 +44,8 @@
     "**/*.js",
     ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "coverage"]
+  "exclude": [
+    "node_modules",
+    "coverage"
+  ]
 }