diff --git a/src/webpage/app.html b/src/webpage/app.html
new file mode 100644
index 0000000..3afb6a5
--- /dev/null
+++ b/src/webpage/app.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+		/>
+		<title>Jank Client</title>
+		<meta content="Jank Client" property="og:title" />
+		<meta content="A spacebar client that has DMs, replying and more" property="og:description" />
+		<meta content="/logo.webp" property="og:image" />
+		<meta content="#4b458c" data-react-helmet="true" name="theme-color" />
+		<link href="/style.css" rel="stylesheet" />
+		<link href="/themes.css" rel="stylesheet" id="lightcss" />
+		<style>
+			body.no-theme,
+			#loading {
+				background: #16191b;
+			}
+			@media (prefers-color-scheme: light) {
+				body.no-theme,
+				#loading {
+					background: #9397bd;
+				}
+			}
+		</style>
+		<link rel="manifest" href="/manifest.json" />
+	</head>
+
+	<body class="no-theme">
+		<div id="loading" class="loading">
+			<div class="centeritem">
+				<img src="/logo.svg" style="width: 3in; height: 3in" />
+				<h1 id="loadingText">Jank Client is loading</h1>
+				<h2 id="load-desc">This shouldn't take long</h2>
+				<h1 id="switchaccounts">Switch Accounts</h1>
+			</div>
+		</div>
+		<div class="flexltr" id="page">
+			<div id="servers"></div>
+			<div class="flexttb channelflex">
+				<div class="flexltr header" id="servertd">
+					<h2 id="serverName" class="ellipsis">Server Name</h2>
+				</div>
+				<div id="channels"></div>
+				<div class="flexttb">
+					<div class="flexltr" id="VoiceBox">
+						<span id="VoiceStatus"></span>
+					</div>
+					<div class="flexltr" id="userdock">
+						<div class="flexltr" id="userinfo">
+							<img id="userpfp" class="pfp" />
+
+							<div class="flexttb userflex">
+								<p id="username">USERNAME</p>
+								<p id="status">STATUS</p>
+							</div>
+						</div>
+
+						<div id="user-actions" class="flexltr">
+							<div><span id="mic" class="svgicon svg-mic"></span></div>
+							<div><span id="settings" class="svgicon svg-settings"></span></div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="flexttb flexgrow" id="mainarea">
+				<div class="flexltr header channelnamediv">
+					<label for="maintoggle" id="maintoggleicon">
+						<span class="svgicon svg-category"></span>
+					</label>
+					<input type="checkbox" id="maintoggle" />
+					<span class="flexltr" style="align-items: center">
+						<span id="channelname">Channel name</span>
+						<span id="channelTopic" class="ellipsis" hidden>Channel topic</span>
+					</span>
+					<div class="spaceElm"></div>
+					<div id="pinnedMDiv">
+						<span class="svgicon svg-pin" id="pinnedM"></span>
+					</div>
+					<div class="searchMeta">
+						<div contenteditable="true" class="searchBox" id="searchBox"></div>
+						<span id="searchX" class="svgicon svg-search" contenteditable="false"></span>
+					</div>
+					<label for="memberlisttoggle" id="memberlisttoggleicon">
+						<span class="svgicon svg-friends"></span>
+					</label>
+					<input type="checkbox" id="memberlisttoggle" checked />
+				</div>
+				<div class="flexltr flexgrow">
+					<div class="flexttb flexgrow">
+						<div id="channelw" class="flexltr">
+							<div id="loadingdiv"></div>
+						</div>
+						<div id="ghostMessages"></div>
+						<div style="position: relative">
+							<div id="searchOptions" class="flexttb searchOptions"></div>
+						</div>
+						<div id="pasteimage" class="flexltr"></div>
+						<div id="replybox" class="hideReplyBox"></div>
+						<div id="typediv">
+							<div id="realbox">
+								<div class="outerTypeBox">
+									<span class="svg-upload svgicon" id="upload"></span>
+									<div id="typebox" contenteditable="true"></div>
+									<span class="svgicon svg-gif" id="gifTB"></span>
+									<span class="svgicon svg-sticker" id="stickerTB"></span>
+									<span class="svgicon svg-emoji" id="emojiTB"></span>
+								</div>
+							</div>
+							<div id="typing" class="hidden flexltr">
+								<p id="typingtext">typing</p>
+								<div class="flexltr loading-indicator">
+									<div class="dot"></div>
+									<div class="dot"></div>
+									<div class="dot"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="flexttb" id="sideContainDiv">
+						<div class="flexttb" id="sideDiv"></div>
+						<div id="player" class="flexttb"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div hidden id="gimmefile">
+			<div id="filedroptext" class="centeritem nonimagecenter">Upload your files here!</div>
+		</div>
+	</body>
+	<script src="/index.js" type="module"></script>
+</html>
