diff --git a/.gitignore b/.gitignore
index 3b19991..8a22d15 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,6 @@ Temporary Items
 # Don't commit the code-workspace files
 *.code-workspace
 
+
+# Database credentials — keep out of version control
+config/db_credentials.php
diff --git a/config/db_credentials.example.php b/config/db_credentials.example.php
new file mode 100644
index 0000000..b109b7d
--- /dev/null
+++ b/config/db_credentials.example.php
@@ -0,0 +1,18 @@
+<?php
+// Database credentials template.
+// Copy this file to db_credentials.php in the same directory and fill in real values.
+// db_credentials.php is gitignored — never commit it. Upload it to the server via SFTP separately.
+
+if (basename($_SERVER['SCRIPT_FILENAME'] ?? '') === basename(__FILE__)) {
+    http_response_code(403);
+    exit;
+}
+
+return [
+    'host'     => 'localhost',
+    'port'     => 3306,
+    'database' => '',
+    'username' => '',
+    'password' => '',
+    'charset'  => 'utf8mb4',
+];
diff --git a/includes/db.php b/includes/db.php
new file mode 100644
index 0000000..918ccd3
--- /dev/null
+++ b/includes/db.php
@@ -0,0 +1,30 @@
+<?php
+// Shared database connection. Include this file and call getDB() to get a PDO handle.
+
+if (basename($_SERVER['SCRIPT_FILENAME'] ?? '') === basename(__FILE__)) {
+    http_response_code(403);
+    exit;
+}
+
+function getDB(): PDO {
+    static $pdo = null;
+    if ($pdo !== null) return $pdo;
+
+    $credentialsFile = __DIR__ . '/../config/db_credentials.php';
+    if (!is_readable($credentialsFile)) {
+        throw new RuntimeException('Database credentials file is missing.');
+    }
+    $cfg = require $credentialsFile;
+
+    $dsn = sprintf(
+        'mysql:host=%s;port=%d;dbname=%s;charset=%s',
+        $cfg['host'], $cfg['port'], $cfg['database'], $cfg['charset']
+    );
+
+    $pdo = new PDO($dsn, $cfg['username'], $cfg['password'], [
+        PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        PDO::ATTR_EMULATE_PREPARES   => false,
+    ]);
+    return $pdo;
+}
diff --git a/live.php b/live.php
new file mode 100644
index 0000000..22f137b
--- /dev/null
+++ b/live.php
@@ -0,0 +1,161 @@
+<!DOCTYPE HTML>
+<!--
+	RFE NEW SITE
+	Strata by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<title>Live Now | Radio Free Elsewhere</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+
+		<meta name="description" content="Something different. Somewhere else.">
+
+		<!-- Facebook Meta Tags -->
+		<meta property="og:url" content="https://cyberpunklibrarian.nohost.me/rfe/live.php">
+		<meta property="og:type" content="website">
+		<meta property="og:title" content="Radio Free Elsewhere — Live Now">
+		<meta property="og:description" content="Something different. Somewhere else.">
+		<meta property="og:image" content="https://cyberpunklibrarian.nohost.me/rfe/images/rfe-social.jpg">
+
+		<!-- Twitter Meta Tags -->
+		<meta name="twitter:card" content="summary_large_image">
+		<meta property="twitter:domain" content="cyberpunklibrarian.nohost.me">
+		<meta property="twitter:url" content="https://cyberpunklibrarian.nohost.me/rfe/live.php">
+		<meta name="twitter:title" content="Radio Free Elsewhere — Live Now">
+		<meta name="twitter:description" content="Something different. Somewhere else.">
+		<meta name="twitter:image" content="https://cyberpunklibrarian.nohost.me/rfe/images/rfe-social.jpg">
+		
+		<link rel="stylesheet" href="assets/css/main.css" />
+
+		<style>
+		        .player-wrapper {
+		            width: 100%;
+		            max-width: 400px;
+		            margin: 0 auto;
+		        }
+		        #now-playing img {
+		            margin: 0 auto;
+		        }
+		        .player-wrapper audio {
+		            width: 100%;
+		        }
+		        #now-playing {
+		            font-family: Arial, sans-serif;
+		            font-size: .9em;
+		            padding: 10px;
+		            background-color: rgb(70, 73, 74, 0.6);
+		            color: #97C9D3;
+		            border-radius: 5px;
+		            display: block;
+		            text-align: center;
+		            box-sizing: border-box;
+		            width: 100%;
+		        }
+		</style>
+	</head>
+
+	<body class="is-preload">
+
+		<!-- Header -->
+			<header id="header">
+				<div class="inner">
+					<a href="index.php" class="image avatar"><img src="images/avatar-rfe.jpg" alt="Radio Free Elsewhere logo" /></a>
+					<h1><strong>Radio Free Elsewhere</strong><br>
+					Something different<br>
+					Somewhere else</h1>
+					
+					<hr>
+
+					
+					<div class="player-wrapper">
+						<div id="now-playing">Loading current song...</div>
+						<br>
+						<audio controls src="https://radio.cyberpunklibrarian.nohost.me/rfe"></audio>
+					</div>
+
+					<script>
+						function fetchNowPlaying() {
+    						fetch('now_playing.php')
+    						.then(response => response.arrayBuffer())
+    						.then(buffer => {
+        						const decoder = new TextDecoder('utf-8');
+        						const data = decoder.decode(buffer);
+        						document.getElementById('now-playing').innerHTML = data;
+    						})
+    						.catch(error => {
+        						document.getElementById('now-playing').innerHTML = "Unable to load song data.";
+        						console.error('Error fetching song data:', error);
+							});
+						}
+					// Fetch immediately and then every 15 seconds
+					fetchNowPlaying();
+					setInterval(fetchNowPlaying, 15000);
+					</script>
+				</div>
+				<p><span style = "color:white;">Add <a href="https://radio.cyberpunklibrarian.nohost.me/rfe">Radio Free Elsewhere</a> to VLC or your favourite audio streaming app.</span></p>
+			</header>
+
+		<!-- Main -->
+			<div id="main">
+
+				<!-- Recently Played -->
+					<section id="one">
+						<header class="major">
+							<h2>Recently Played</h2>
+						</header>
+						<div class="table-wrapper">
+							<table>
+								<thead>
+									<tr>
+										<th>Time</th>
+										<th>Title</th>
+										<th>Artist</th>
+										<th>Album</th>
+									</tr>
+								</thead>
+								<tbody id="recently-played">
+									<!-- Populated from the database once track history is in place -->
+									<tr>
+										<td colspan="4">Track history coming soon.</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</section>
+
+			</div>
+
+		<!-- Footer -->
+			<footer id="footer">
+				<div class="inner">
+					<ul class="icons">
+						<li><a href="https://masto.hackers.town/@cyberpunklibrarian" class="icon brands fa-mastodon"><span class="label">Mastodon</span></a></li>
+						<li><a href="https://cyberpunklibrarian.nohost.me/gitea/Public/radio-free-elsewhere" class="icon brands fa-gitlab"><span class="label">Github</span></a></li>
+					</ul>
+					<ul class="copyright">
+						<li>&copy; 2025 CC-By-NC-SA</li> 
+						<li>Tanglewood Hill Studio</li>
+						<li><a href="http://html5up.net">HTML5 UP</a></li>
+					</ul>
+				</div>
+			</footer>
+
+		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/jquery.poptrox.min.js"></script>
+			<script src="assets/js/browser.min.js"></script>
+			<script src="assets/js/breakpoints.min.js"></script>
+			<script src="assets/js/util.js"></script>
+			<script src="assets/js/main.js"></script>
+			<script>
+				if ('addEventListener' in window) {
+					document.addEventListener('DOMContentLoaded', function() { document.body.className = document.body.className.replace(/\bis-preload\b/, ''); });
+					document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
+				}
+			</script>
+
+	</body>
+</html>
\ No newline at end of file