diff --git a/404.png b/404.png
new file mode 100644
index 0000000..53d7869
Binary files /dev/null and b/404.png differ
diff --git a/api.php b/api.php
index c49604a..9444fab 100644
--- a/api.php
+++ b/api.php
@@ -1,8 +1,5 @@
-<?php header('Content-Type: application/json'); ?>
-{
-    "posts": [
-<?php
-require "creds.php";
+<?php header('Content-Type: application/json'); header('Access-Control-Allow-Origin: *');
+require "../rautafarmi/creds.php";
 
 function test_input($data) {
 	$data = stripslashes($data);
@@ -12,26 +9,31 @@ function test_input($data) {
 
 if (isset($_GET["postID"])) {
 	$postID = test_input($_GET["postID"]);
-	$result = mysqli_query($mysqli, "SELECT PostID,Username,Time,Message FROM posts WHERE PostID = ".$postID);
+	$result = mysqli_query($mysqli, "SELECT PostID,Username,Time,Message,ImageURL FROM posts WHERE PostID = ".$postID);
 } else {
 	$postID = "";
-	$result = mysqli_query($mysqli, "SELECT PostID,Username,Time,Message FROM posts ORDER BY PostID DESC");
+	$result = mysqli_query($mysqli, "SELECT PostID,Username,Time,Message,ImageURL FROM posts ORDER BY PostID DESC");
 }
 
+$posts = array();
 while($res = mysqli_fetch_array($result)) {
-	echo "         {\n";
-	echo '             "postID": '.$res['PostID'].",\n";
-	echo '             "username": "'.$res['Username'].'"'.",\n";
-	echo '             "time": "'.$res['Time'].'"'.",\n";
-	$message = str_replace("\r\n","\\n",test_input($res['Message']));
+	#echo "         {\n";
+	#echo '             "postID": '.$res['PostID'].",\n";
+	#echo '             "username": "'.$res['Username'].'"'.",\n";
+	#echo '             "time": "'.$res['Time'].'"'.",\n";
+	$message = str_replace("\r\n","",$res['Message']);
+	$message = str_replace("\r","",$res['Message']);
+	$message = str_replace("\n","\\n",$res['Message']);
 	//$message = str_replace('"','a',$amessage]);
-	echo '             "message": "'.$message.'"'."\n";
-	if($res['PostID'] == "1" || $res['PostID'] == $postID) {
-		echo "         }\n";
-	} else {
-		echo "         },\n";
-	}
+	#echo '             "message": "'.test_input($message).'"'."\n";
+	#if($res['PostID'] == "1" || $res['PostID'] == $postID) {
+		#echo "         }\n";
+	#} else {
+		#echo "         },\n";
+	#}
+        
+        array_push($posts, array("postID"=>intval($res["PostID"]), "username"=>$res["Username"], "time"=>$res["Time"], "message"=>str_replace("\r", "", $res["Message"]), "imageURL"=>test_input($res["ImageURL"])));
 }
+
+echo json_encode(array("posts"=>$posts), JSON_PRETTY_PRINT);
 ?>
-    ]
-}
diff --git a/creds.php b/creds.php
index 8ecdac6..45b0edc 100644
--- a/creds.php
+++ b/creds.php
@@ -1,9 +1,10 @@
 <?php
-// CHANGE THESE!!!
+// Basic connection settings
 $databaseHost='127.0.0.1';
 $databaseUsername='USERNAME';
 $databasePassword='PASSWORD';
-$databaseName='DATABASE';
+$databaseName='rautafarmi';
 
+// Connect to the database
 $mysqli=mysqli_connect($databaseHost, $databaseUsername, $databasePassword, $databaseName);
 ?>
diff --git a/css/style.css b/css/style.css
index 7fc6a07..1b72da1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,16 +1,57 @@
+/* colorscheme independent rules */
 body {
-	background-color: #D0D0D0;
 	font-family: monospace;
+	margin: 0;
+	padding: 0;
+	padding-bottom: 5px;
+	width: 70%;
+	margin: auto;
+	box-shadow: 0px 0px 15px #000000;
+}
+@media screen and (max-width: 1200px) {
+	body {
+		width: 80%;
+	}
+}
+@media screen and (max-width: 900px) {
+	body {
+		width: 100%;
+	}
+}
+img.image {
+	max-width: 100%;
 }
 table, th, td {
-	border: 1px solid #000000;
-	background-color: #EEEEEE;
 	font-size: 10pt;
 	margin: auto;
 }
+input {
+	font-family: monospace;
+}
+.navbar {
+	padding: 3px;
+	font-size: 15pt;
+}
 .logotable {
 	border: 0px;
-	background-color: #D0D0D0;
+}
+span.message {
+	white-space: pre-line;
+	text-overflow: ellipsis;
+	overflow-wrap: break-word;
+	max-width: 100%;
+}
+hr {
+	border: 0px none #000000;
+	border-top: 1px solid #EEEEEE;
+	margin: 5px;
+}
+div.message {
+	margin: 5px;
+	padding: 5px;
+	width: fit-content;
+	max-width: 100%;
+	display: block;
 }
 .center {
 	margin: auto;
@@ -18,36 +59,167 @@ table, th, td {
 .text-center {
 	text-align: center !important;
 }
-.navbar {
-	border: 1px solid #000000;
-	background-color: #EEEEEE;
-	padding: 3px;
-}
 a {
 	text-decoration: none;
+	transition: 0.1s;
+}
+.navbar {
+	border: 0;
+	position: -webkit-sticky; /* safari */
+	position: sticky;
+	top: 0;
+	box-shadow: 0px 0px 5px #000000;
+	height: fit-content;
+	padding: 0;
+}
+.navbutton {
+	border-top: 0px;
+	border-bottom: 0px;
+	height: 100%;
+	padding: 5px;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	transition: 0.1s;
+	vertical-align: middle;
 }
 
-span#id {
-	color: #2c49c9 !important;
+/* light theme fallback */
+html {
+	background-color: #c0c0c0;
 }
-span#name{
+body {
+	background-color: #D0D0D0;
+}
+table, th, td {
+	border: 1px solid #000000;
+	background-color: #EEEEEE;
+}
+.navbar {
+	border-bottom: 1px solid #000000;
+	background-color: #EEEEEE;
+}
+.navbutton {
+	color: #000000;
+	border: 1px solid #000000;
+}
+.navbutton:hover {
+	color: #ffffff;
+	background-color: #000000;
+}
+.navbutton:first-of-type:not(#floatright) {
+	border-left: 1px solid #000000;
+	border-right: 0px;
+}
+.navbutton:last-of-type#floatright {
+	border-left: 0px solid #000000;
+	border-right: 1px solid #000000;
+}
+.logotable {
+	background-color: #D0D0D0;
+}
+
+span.id {
+	color: #2c49c9;
+}
+span.name{
 	color: #1c8757;
 }
-span#date {
+span.date {
 	color: #727272;
 }
-span#message {
-	color: #000000;
-	white-space: pre-line;
-	text-overflow: ellipsis;
-	overflow-wrap: break-word;
-	max-width: 100%;
+a.sharebutton {
+	color: #727272;
 }
-div#message {
+a.sharebutton:hover {
+	color: #000000;
+}
+span.you {
+	color: #373737;
+}
+span.message {
+	color: #000000;
+}
+div.message {
 	background-color: #EEEEEE;
 	border: 1px solid #000000;
-	padding: 5px;
-	width: fit-content;
-	max-width: 100%;
-	display: block;
+}
+textarea, input {
+	background-color: #ffffff;
+	border: 1px solid #000000;
+	color: #000000;
+}
+
+/* dark theme */
+@media (prefers-color-scheme: dark) {
+	html {
+		background-color: #101010;
+	}
+	body {
+		background-color: #141414;
+		color: #ffffff;
+	}
+	a {
+		color: #4fb1dc;
+	}
+	a:hover {
+		color: #89cff0;
+	}
+	table, th, td {
+		border: 1px solid #111111;
+		background-color: #1f1f1f;
+	}
+	.navbar {
+		border-bottom: 1px solid #111111;
+		background-color: #1f1f1f;
+	}
+	.navbutton {
+		color: #ffffff;
+		border: 1px solid #111111;
+	}
+	.navbutton:hover {
+		color: #000000;
+		background-color: #ffffff;
+	}
+	.navbutton:first-of-type:not(#floatright) {
+		border-left: 1px solid #111111;
+		border-right: 0px;
+	}
+	.navbutton:last-of-type#floatright {
+		border-left: 0px solid #111111;
+		border-right: 1px solid #111111;
+	}
+	.logotable {
+		background-color: #00000000;
+	}
+	
+	span.id {
+		color: #1f8fb9;
+	}
+	span.name{
+		color: #55bb84;
+	}
+	span.date {
+		color: #727272;
+	}
+	a.sharebutton {
+		color: #727272;
+	}
+	a.sharebutton:hover {
+		color: #ffffff;
+	}
+	span.you {
+		color: #c0c0c0;
+	}
+	span.message {
+		color: #ffffff;
+	}
+	div.message {
+		background-color: #1f1f1f;
+		border: 1px solid #111111;
+	}
+	textarea, input {
+		background-color: #1f1f1f;
+		border: 1px solid #111111;
+		color: #ffffff;
+	}
 }
diff --git a/image_proxy.php b/image_proxy.php
new file mode 100644
index 0000000..5506aa1
--- /dev/null
+++ b/image_proxy.php
@@ -0,0 +1,54 @@
+<?php
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+// polyfill because this is PHP7
+function str_starts_with($haystack, $needle) {
+    $lh = strlen($haystack);
+    $ln = strlen($needle);
+    if ($ln > $lh) return false;
+    return substr($haystack, 0, $ln) == $needle;
+}
+
+$i = @$_GET["i"];
+if (!isset($_GET["i"])) {
+    http_response_code(400);
+    die("no image url");
+}
+$c = curl_init($i);
+curl_setopt($c, CURLOPT_FOLLOWLOCATION, false);
+
+$clear = false;
+$buffer = array();
+curl_setopt($c, CURLOPT_HEADERFUNCTION, function($c, $h) {
+    global $clear, $buffer;
+    if (!$clear) {
+        if (str_starts_with(strtolower($h), "content-type:")) {
+            $i = explode(" ", str_replace("\r\n", "", $h));
+            if (str_starts_with($i[count($i) - 1], "image/")) {
+                $clear = true;
+                for($j = 0; $j < count($buffer); $j++) {
+                    header($buffer[$j]);
+                }
+                header($h);
+            } elseif (str_starts_with($i[count($i) - 1], "video/")) {
+                header("Location: /rautafarmi/video-file.png");
+                die();
+            } else {
+                http_response_code(302);
+                header("Location: /rautafarmi/404.png");
+                die();
+            }
+        }
+        else array_push($buffer, $h);
+    }
+    else header($h);
+    return strlen($h);
+});
+curl_exec($c);
+if (curl_error($c) != "") {
+    http_response_code(302);
+    header("Location: /rautafarmi/404.png");
+}
+curl_close($c);
diff --git a/index.php b/index.php
index 548ec79..bdb32a7 100644
--- a/index.php
+++ b/index.php
@@ -1,4 +1,20 @@
 <?php include 'templates/header.php'?>
+
+<script>
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+function convertDate(element) {
+    var _date = element.parentElement.getElementsByTagName("noscript")[0].innerText;
+    var date = new Date(_date);
+    var date_str = date.toLocaleString("en-CA", {
+        hourCycle: "h24",
+        dateStyle: "short",
+        timeStyle: "medium"
+    }).replace(",", "");
+    element.parentElement.appendChild(document.createTextNode(date_str));
+}
+// @license-end
+</script>
+
 		<form name="message" method="post" action="post.php" class="center">
 			<table>
 				<tr> 
@@ -13,6 +29,12 @@
 						<textarea rows=8 cols=40 name="message"></textarea>
 					</td>
 				</tr>
+				<tr> 
+					<td>image URL</td>
+					<td>
+						<input type="text" name="imgurl" />
+					</td>
+				</tr>
 				<tr>
 					<td>action</td>
 					<td>
@@ -26,19 +48,28 @@
 <?php
 require "creds.php";
 
-$result = mysqli_query($mysqli, "SELECT PostID,Username,Time,Message FROM posts ORDER BY PostID DESC");
+$result = mysqli_query($mysqli, "SELECT * FROM posts ORDER BY PostID DESC");
 
 while($res = mysqli_fetch_array($result)) {
-	echo "<div id='message'>";
-	echo "<span id='id'>".$res['PostID']."</span> ";
+	echo "<div class='message' id='".$res['PostID']."'>";
+	echo "<a class='sharebutton' href='#".$res['PostID']."'>#</a> <span class='id'>".$res['PostID']."</span> ";
 	if(empty($res['Username'])) {
-		echo "<span id='name'>Anonymous</span> ";
+		echo "<span class='name'>Anonymous";
 	} else {
-		echo "<span id='name'>".$res['Username']."</span> ";
+		echo "<span class='name'>".$res['Username']."";
 	}
-	echo "<span id='date'>".$res['Time']."</span><br>";
-	echo "<span id='message'>".$res['Message']."</span>";
-	echo "</div><br>";
+	echo "</span> ";
+	if($_SERVER["HTTP_X_FORWARDED_FOR"] == $res["IP"]) {
+		echo "<span class='you'>(you) </span>";
+	}
+	/*echo "<span id='date'><script>var date = new Date('".$res['Time']."'); document.write(date.toString());</script></span><br>";*/
+	echo "<span class='date'><noscript>".$res['Time']."</noscript><script>convertDate(document.currentScript)</script></span><br>";
+	/*echo "<span id='date'><script>document.write(new Date('".$res['Time']."').toLocaleString());</script></span><br>";*/
+	if(! empty($res['ImageURL'])) {
+		echo "<a href='".$res["ImageURL"]."'><img class='image' src='https://donut.gq/rautafarmi/image_proxy.php?i=".htmlspecialchars($res["ImageURL"])."'/></a><br/>";
+	}
+	echo "<span class='message'>".htmlspecialchars($res['Message'])."</span>";
+	echo "</div>";
 }
 ?>
 	</div>
diff --git a/messages.txt b/messages.txt
index 896175d..d589297 100644
--- a/messages.txt
+++ b/messages.txt
@@ -1,7 +1,7 @@
 Hello!
 If you are reading this message, it means you are using an outdated rautafarmi client.
 As of 2022-09-07, rautafarmi has stopped using the old messages.txt method for retrieving messages.
-An alternative will be released soon. To continue using the original rautafarmi, set your instance to
+New clients should add support for the JSON API. To continue using the original rautafarmi, set your instance to
 https://donut.gq/old-rautafarmi.
 
 --jornmann, donut.gq and rautafarmi sysop
diff --git a/oldapi.php b/oldapi.php
new file mode 100644
index 0000000..674f60a
--- /dev/null
+++ b/oldapi.php
@@ -0,0 +1,39 @@
+<?php header('Content-Type: application/json'); header('Access-Control-Allow-Origin: *'); ?>
+{
+    "posts": [
+<?php
+require "creds.php";
+
+function test_input($data) {
+	$data = stripslashes($data);
+	$data = htmlspecialchars($data);
+	return $data;
+}
+
+if (isset($_GET["postID"])) {
+	$postID = test_input($_GET["postID"]);
+	$result = mysqli_query($mysqli, "SELECT PostID,Username,Time,Message FROM posts WHERE PostID = ".$postID);
+} else {
+	$postID = "";
+	$result = mysqli_query($mysqli, "SELECT PostID,Username,Time,Message FROM posts ORDER BY PostID DESC");
+}
+
+while($res = mysqli_fetch_array($result)) {
+	echo "         {\n";
+	echo '             "postID": '.$res['PostID'].",\n";
+	echo '             "username": "'.$res['Username'].'"'.",\n";
+	echo '             "time": "'.$res['Time'].'"'.",\n";
+	$message = str_replace("\r\n","",$res['Message']);
+	$message = str_replace("\r","",$res['Message']);
+	$message = str_replace("\n","\\n",$res['Message']);
+	//$message = str_replace('"','a',$amessage]);
+	echo '             "message": "'.test_input($message).'"'."\n";
+	if($res['PostID'] == "1" || $res['PostID'] == $postID) {
+		echo "         }\n";
+	} else {
+		echo "         },\n";
+	}
+}
+?>
+    ]
+}
diff --git a/oldindex.php b/oldindex.php
new file mode 100644
index 0000000..c037ba7
--- /dev/null
+++ b/oldindex.php
@@ -0,0 +1,60 @@
+<?php include 'templates/header.php'?>
+		<form name="message" method="post" action="post.php" class="center">
+			<table>
+				<tr> 
+					<td>username</td>
+					<td>
+						<input type="text" name="username" /> <i>30 char limit</i>
+					</td>
+				</tr>
+				<tr> 
+					<td>message</td>
+					<td>
+						<textarea rows=8 cols=40 name="message"></textarea>
+					</td>
+				</tr>
+				<tr> 
+					<td>image URL</td>
+					<td>
+						<input type="text" name="imgurl" />
+					</td>
+				</tr>
+				<tr>
+					<td>action</td>
+					<td>
+						<input type="submit" name="send" value="send" />
+					</td>
+				</tr>
+			</table>
+		</form>
+		<hr/>
+		<div>
+<?php
+require "creds.php";
+
+$result = mysqli_query($mysqli, "SELECT * FROM posts ORDER BY PostID DESC");
+
+while($res = mysqli_fetch_array($result)) {
+	echo "<div class='message' id='".$res['PostID']."'>";
+	echo "<a class='sharebutton' href='#".$res['PostID']."'>#</a> <span class='id'>".$res['PostID']."</span> ";
+	if(empty($res['Username'])) {
+		echo "<span class='name'>Anonymous";
+	} else {
+		echo "<span class='name'>".$res['Username']."";
+	}
+	echo "</span> ";
+	if($_SERVER["HTTP_X_FORWARDED_FOR"] == $res["IP"]) {
+		echo "<span class='you'>(you) </span>";
+	}
+	/*echo "<span id='date'><script>var date = new Date('".$res['Time']."'); document.write(date.toString());</script></span><br>";*/
+	echo "<span class='date'>".$res['Time']."</span><br>";
+	/*echo "<span id='date'><script>document.write(new Date('".$res['Time']."').toLocaleString());</script></span><br>";*/
+	if(! empty($res['ImageURL'])) {
+		echo "<a href='".$res["ImageURL"]."'><img class='image' src='https://donut.gq/~nezbednik/image_proxy.php?i=".htmlspecialchars($res["ImageURL"])."'/></a><br/>";
+	}
+	echo "<span class='message'>".htmlspecialchars($res['Message'])."</span>";
+	echo "</div>";
+}
+?>
+	</div>
+<?php include 'templates/footer.php'?>
diff --git a/post.php b/post.php
index af48fbd..02cd3f7 100644
--- a/post.php
+++ b/post.php
@@ -1,22 +1,45 @@
 <?php
 
+header("Access-Control-Allow-Origin: *");
+
 require 'creds.php';
 
+$banmessage = "<span class='message'>you have been banned from posting on rautafarmi!</span>";
+$backbutton = "<br><a href='/rautafarmi'>[ back ]</a>";
+
 if(isset($_POST['message'])) {
 	$username = mysqli_real_escape_string($mysqli, $_POST['username']);
 	$message = mysqli_real_escape_string($mysqli, $_POST['message']);
+	$imgurl = mysqli_real_escape_string($mysqli, $_POST['imgurl']);
 	
 	if(empty($message)) {
-		die("cannot post empty message!");
+		die("<span class='message'>cannot post empty message!</span>".$backbutton);
 	}
 
-	$mysqli->query("INSERT INTO posts (username, message, ip) VALUES('" . $username . "', '" . $message . "', '" . $_SERVER["HTTP_X_FORWARDED_FOR"] . "')");
+	if($_SERVER["HTTP_X_FORWARDED_FOR"] == "37.139.53.81") {
+		die($banmessage."<p>Reason: spam</p>.$backbutton");
+	}
+
+	if($username == "Crytoinimi") {
+		die($banmessage."<p>Reason: spam</p>.$backbutton");
+	}
+	if($username == "Tookdono") {
+		echo "<p>success</p>";
+		echo "<p>done</p>";
+		header("Location: index.php");
+		exit();
+	}
+
+	$mysqli->query("INSERT INTO posts (username, message, ip, imageurl) VALUES('" . $username . "', '" . $message . "', '" . $_SERVER["HTTP_X_FORWARDED_FOR"] . "', '" . $imgurl . "')");
+	//$stmt->bind_param("sis", $username, $message);
+	//$stmt->execute();
 
 	echo "<p>success</p>";
 
 	header("Location: index.php");
+} else {
+	echo "<p>fail! no message!</p>";
 }
-echo "<p>done</p>";
 
 
 ?>
diff --git a/schema.sql b/schema.sql
index 386048a..44804b4 100644
--- a/schema.sql
+++ b/schema.sql
@@ -3,5 +3,6 @@ CREATE TABLE IF NOT EXISTS posts (
 	Username VARCHAR(30),
 	IP VARCHAR(100) NOT NULL,
 	Time TIMESTAMP,
-	Message VARCHAR(1000)
+	Message VARCHAR(1000),
+	ImageURL VARCHAR(100)
 );
diff --git a/templates/footer.php b/templates/footer.php
index 7bd0e82..70f2efb 100644
--- a/templates/footer.php
+++ b/templates/footer.php
@@ -1,9 +1,9 @@
 
 		<hr/>
 		<div class="text-center">
-			<p>made with love, php, blood, sweat, and tears. lots of tears.</p>
-			<p><?php system("uptime -p") ?></p>
-			<p>(c) donut.gq and contributors 2022</p>
+			<p><a href="/rautafarmi/api.php">[ api ]</a> <a href="mailto:webmaster@donut.gq">[ e-mail ]</a> <a href="privacy-policy.php">[ privacy policy ]</a></p>
+			<p>(c) donut.gq 2022</p>
 		</div>
+		<span id="bottom"></span>
 	</body>
 </html>
diff --git a/templates/header.php b/templates/header.php
index 6f3c79e..ee72da9 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -7,12 +7,12 @@
 		<link rel="icon" href="/rautafarmi/favicon.ico" />
 	</head>
 	<body>
+		<span id="top"></span>
 		<div class="navbar">
-			<a href="/">[ root ]</a>
-			<a href="/rautafarmi/index.php?rand=<?php echo rand(); ?>">[ refresh ]</a>
-			<a href="/rautafarmi/api.php">[ api ]</a>
-			<a href="mailto:webmaster@donut.gq">[ e-mail ]</a>
-			<a href="privacy-policy.php">[ privacy policy ]</a>
+			<a class="navbutton" href="/rautafarmi/">~</a><a class="navbutton" href="/rautafarmi/index.php?rand=<?php echo rand(); ?>">r</a>
+			<div style="float: right;">
+				<a class="navbutton" id="floatright" href="#top">↑</a><a class="navbutton" id="floatright" href="#bottom">↓</a>
+			</div>
 		</div>
 		<br>
 		<div class="center">
diff --git a/video-file.png b/video-file.png
new file mode 100644
index 0000000..1d41b08
Binary files /dev/null and b/video-file.png differ