diff --git a/metar.html b/metar.html
index df77196..bb7c378 100644
--- a/metar.html
+++ b/metar.html
@@ -5,17 +5,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>METAR Practice</title>
     <style>
+        body { font-family: monospace; padding: 2em; }
+        #metar-display { font-size: 1.2em; margin-bottom: 1em; }
+        button { font-size: 1em; padding: 0.5em 1em; }
     </style>
 </head>
 <body>
     <div id="app">
         <h1>METAR Practice</h1>
 
-
+        <div id="metar-display"></div>
+        <button id="new-metar-btn">New METAR</button>
     </div>
     <script>
+        const metarDisplay = document.getElementById('metar-display');
+        const newMetarBtn = document.getElementById('new-metar-btn');
         const metars = [];
 
+        function displayNewMetar() {
+            if (metars.length === 0) {
+                metarDisplay.textContent = 'No METARs loaded.';
+                return;
+            }
+            const randomIndex = Math.floor(Math.random() * metars.length);
+            metarDisplay.textContent = metars[randomIndex];
+        }
+
         fetch('metars.txt')
             .then(response => response.text())
             .then(data => {
@@ -29,8 +44,14 @@
                     }
                 });
                 console.log(`Loaded ${metars.length} METARs.`);
+                displayNewMetar(); // Display initial METAR
             })
-            .catch(error => console.error('Error fetching or parsing metars.txt:', error));
+            .catch(error => {
+                console.error('Error fetching or parsing metars.txt:', error)
+                metarDisplay.textContent = 'Could not load METARs.';
+            });
+
+        newMetarBtn.addEventListener('click', displayNewMetar);
     </script>
 </body>
 </html>
