diff --git a/api-examples/get_ballots.html b/api-examples/get_ballots.html
index 917f848..d5c8032 100644
--- a/api-examples/get_ballots.html
+++ b/api-examples/get_ballots.html
@@ -1,66 +1,122 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-  <link rel="stylesheet" type="text/css" href="../dependencies/style.css">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Get Ballots</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compound Governance Ballots</title>
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom scrollbar style for aesthetics */
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 8px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background-color: #93c5fd; /* blue-300 */
+            border-radius: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #e0f2f1; /* lighter track */
+        }
+    </style>
 </head>
-<body>
-  <h1 id="proposal">Proposal ID: </h1>
-  <div id="ballots"></div>
-</body>
+<body class="bg-gray-50 font-sans min-h-screen p-4">
 
-<script type="text/javascript" src="../dependencies/handlebars.min.js"></script>
-<script type="text/javascript">
-  window.addEventListener('load', (event) => {
-    const ballotListContainer = document.getElementById('ballots');
-    const ballotListTemplate = Handlebars.compile(`
-      {{#each this}}
-      <div class="card">
-        <h4>{{ address }}</h4>
-        <label>Support: </label>&nbsp;<span>{{ support }}</span>
-        <br />
-        <label>Votes: </label>&nbsp;<span>{{ votes }}</span>
-      </div>
-    {{/each}}
-    `);
+    <div class="max-w-4xl mx-auto bg-white shadow-xl rounded-xl p-6 md:p-10 border border-gray-200">
+        <header class="text-center mb-8">
+            <h1 id="proposal-title" class="text-3xl md:text-4xl font-extrabold text-indigo-700 mb-2">
+                Compound Proposal ID: 
+            </h1>
+            <p class="text-gray-600">Live Vote Receipts from Compound Governance API</p>
+        </header>
 
-    const proposal = 3;
-    const proposalElement = document.getElementById('proposal');
-    proposalElement.innerText = proposalElement.innerText + proposal;
+        <div id="ballots-container" class="space-y-4 custom-scrollbar max-h-[70vh] overflow-y-auto">
+            <p class="text-center text-gray-500 py-10">Fetching ballots...</p>
+        </div>
 
-    let requestParameters = {
-      "proposal_id": proposal,     // integer ID
-      "page_size": 100,            // number of results in a page
-      "network": "mainnet",        // mainnet, ropsten
-      // "account": "",            // filter by a specific voter's Ethereum address
-      // "support": "",            // filter by for or against with a boolean
-      // "with_proposal_data": "", // include proposal data in the response
-      // "page_number": 1,         // see subsequent response's `pagination_summary` to specify the next page
-    };
+        <div id="error-message" class="hidden mt-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+            <strong class="font-bold">API Error!</strong>
+            <span class="block sm:inline" id="error-text"></span>
+        </div>
+    </div>
 
-    requestParameters = '?' + new URLSearchParams(requestParameters).toString();
+    <script>
+        // Proposal ID we are querying. Set as a constant.
+        const PROPOSAL_ID = 3; 
 
-    ballotListContainer.innerHTML = '<p style="text-align:center;">Fetching ballots...</p>';
+        document.addEventListener('DOMContentLoaded', () => {
+            const proposalElement = document.getElementById('proposal-title');
+            const ballotListContainer = document.getElementById('ballots-container');
+            const errorElement = document.getElementById('error-message');
+            const errorText = document.getElementById('error-text');
 
-    fetch(`https://api.compound.finance/api/v2/governance/proposal_vote_receipts${requestParameters}`)
-    .then((response) => response.json())
-    .then((result) => {
-      let submittedBallots = result.proposal_vote_receipts || [];
-      let formattedBallots = [];
-      submittedBallots.forEach((ballot) => {
-        formattedBallots.push({
-          address: ballot.voter.address,
-          support: ballot.support ? 'In Favor' : 'Against',
-          votes: parseFloat(ballot.votes).toFixed(2),
-        });
-      });
+            // Update the title with the actual proposal ID
+            proposalElement.innerText += PROPOSAL_ID;
+
+            const requestParameters = {
+                "proposal_id": PROPOSAL_ID,
+                "page_size": 100,
+                "network": "mainnet",
+            };
+
+            const queryString = '?' + new URLSearchParams(requestParameters).toString();
+            const apiUrl = `https://api.compound.finance/api/v2/governance/proposal_vote_receipts${queryString}`;
 
-      console.log(formattedBallots);
+            /**
+             * Formats and renders the list of ballots using native JavaScript template literals.
+             * @param {Array<Object>} ballots - Raw list of vote receipts.
+             */
+            const renderBallots = (ballots) => {
+                if (ballots.length === 0) {
+                    ballotListContainer.innerHTML = '<p class="text-center text-gray-500 py-10">No ballots found for this proposal.</p>';
+                    return;
+                }
 
-      ballotListContainer.innerHTML = ballotListTemplate(formattedBallots);
-    });
-  });
-</script>
+                const formattedHtml = ballots.map(ballot => {
+                    const supportStatus = ballot.support ? 'In Favor' : 'Against';
+                    const supportColor = ballot.support ? 'text-green-600' : 'text-red-600';
+                    const votesFormatted = parseFloat(ballot.votes).toFixed(2);
+                    const addressShort = `${ballot.voter.address.substring(0, 6)}...${ballot.voter.address.substring(38)}`;
 
+                    return `
+                        <div class="bg-gray-50 p-4 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200">
+                            <h4 class="text-md font-semibold text-gray-800 break-words">${ballot.voter.address}</h4>
+                            <div class="mt-2 text-sm space-y-1">
+                                <p class="flex justify-between">
+                                    <span class="font-medium text-gray-500">Support:</span>
+                                    <span class="${supportColor} font-bold">${supportStatus}</span>
+                                </p>
+                                <p class="flex justify-between">
+                                    <span class="font-medium text-gray-500">Votes:</span>
+                                    <span class="text-gray-900 font-mono">${votesFormatted} COMP</span>
+                                </p>
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+
+                ballotListContainer.innerHTML = formattedHtml;
+            };
+
+            // Fetch data from Compound API
+            fetch(apiUrl)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(result => {
+                    const submittedBallots = result.proposal_vote_receipts || [];
+                    renderBallots(submittedBallots);
+                })
+                .catch(error => {
+                    console.error("API Fetch Error:", error);
+                    ballotListContainer.innerHTML = '';
+                    errorText.innerText = `Could not fetch data. ${error.message}`;
+                    errorElement.classList.remove('hidden');
+                });
+        });
+    </script>
+</body>
 </html>
