diff --git a/overlay-text-only.html b/overlay-text-only.html
new file mode 100644
index 0000000..a066395
--- /dev/null
+++ b/overlay-text-only.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Now Playing (Text Only)</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.5);
+            margin: 0;
+            padding: 20px;
+            border-radius: 10px;
+        }
+        #song-info {
+            display: flex;
+            flex-direction: column;
+        }
+        #title {
+            font-size: 24px;
+            font-weight: bold;
+        }
+        #artist {
+            font-size: 18px;
+        }
+        #annotation {
+            font-size: 12px;
+            margin-top: 10px;
+            color: #ccc;
+        }
+    </style>
+</head>
+<body>
+    <div id="song-info">
+        <div id="title"></div>
+        <div id="artist"></div>
+        <div id="annotation">radio.ramforth.net</div>
+    </div>
+
+    <script>
+        const nowPlayingUrl = 'https://radio.ramforth.net/api/nowplaying/1';
+
+        function updateNowPlaying() {
+            fetch(nowPlayingUrl)
+                .then(response => response.json())
+                .then(data => {
+                    const song = data.now_playing.song;
+                    document.getElementById('title').textContent = song.title;
+                    document.getElementById('artist').textContent = song.artist;
+                })
+                .catch(error => {
+                    console.error('Error fetching Now Playing data:', error);
+                    document.getElementById('title').textContent = 'Error';
+                    document.getElementById('artist').textContent = 'Could not fetch data';
+                });
+        }
+
+        // Update every 5 seconds
+        setInterval(updateNowPlaying, 5000);
+
+        // Initial update
+        updateNowPlaying();
+    </script>
+</body>
+</html>
diff --git a/overlay-with-album-art.html b/overlay-with-album-art.html
new file mode 100644
index 0000000..53e4d50
--- /dev/null
+++ b/overlay-with-album-art.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Now Playing</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.5);
+            margin: 0;
+            padding: 20px;
+            border-radius: 10px;
+        }
+        #now-playing {
+            display: flex;
+            align-items: center;
+        }
+        #album-art {
+            width: 100px;
+            height: 100px;
+            margin-right: 20px;
+            border-radius: 5px;
+        }
+        #song-info {
+            display: flex;
+            flex-direction: column;
+        }
+        #title {
+            font-size: 24px;
+            font-weight: bold;
+        }
+        #artist {
+            font-size: 18px;
+        }
+        #annotation {
+            font-size: 12px;
+            margin-top: 10px;
+            color: #ccc;
+        }
+    </style>
+</head>
+<body>
+    <div id="now-playing">
+        <img id="album-art" src="" alt="Album Art">
+        <div id="song-info">
+            <div id="title"></div>
+            <div id="artist"></div>
+            <div id="annotation">radio.ramforth.net</div>
+        </div>
+    </div>
+
+    <script>
+        const nowPlayingUrl = 'https://radio.ramforth.net/api/nowplaying/1';
+
+        function updateNowPlaying() {
+            fetch(nowPlayingUrl)
+                .then(response => response.json())
+                .then(data => {
+                    const song = data.now_playing.song;
+                    document.getElementById('title').textContent = song.title;
+                    document.getElementById('artist').textContent = song.artist;
+                    document.getElementById('album-art').src = song.art;
+                })
+                .catch(error => {
+                    console.error('Error fetching Now Playing data:', error);
+                    document.getElementById('title').textContent = 'Error';
+                    document.getElementById('artist').textContent = 'Could not fetch data';
+                });
+        }
+
+        // Update every 5 seconds
+        setInterval(updateNowPlaying, 5000);
+
+        // Initial update
+        updateNowPlaying();
+    </script>
+</body>
+</html>
