diff --git a/files/assets/css/fontawesome.css b/files/assets/css/fontawesome.css
new file mode 100644
index 000000000..0fd8eab49
--- /dev/null
+++ b/files/assets/css/fontawesome.css
@@ -0,0 +1,365 @@
+/* ------- Font Awesome ------- */
+@font-face{
+	font-family:"Font Awesome 6 Pro";
+	font-style:normal;
+	font-weight:400;
+	font-display:block;
+	src:url(../fonts/fa-regular-400.woff2) format("woff2"),
+		url(../fonts/fa-regular-400.ttf) format("truetype")
+}
+@font-face{
+	font-family:"Font Awesome 6 Pro";
+	font-style:normal;
+	font-weight:900;
+	font-display:block;
+	src:url(../fonts/fa-solid-900.woff2) format("woff2"),
+		url(../fonts/fa-solid-900.ttf) format("truetype")
+}
+@font-face{
+	font-family:"Font Awesome 6 Pro";
+	font-style:normal;
+	font-weight:100;
+	font-display:block;
+	src:url(../fonts/fa-thin-100.woff2) format("woff2"),
+		url(../fonts/fa-thin-100.ttf) format("truetype")
+}
+@font-face{
+	font-family:"Font Awesome 5 Brands";
+	font-display:block;
+	font-weight:400;
+	src:url(../fonts/fa-brands-400.woff2) format("woff2"),
+		url(../fonts/fa-brands-400.ttf) format("truetype")
+}
+@font-face{
+	font-family:"Font Awesome 5 Pro";
+	font-display:block;
+	font-weight:900;
+	src:url(../fonts/fa-solid-900.woff2) format("woff2"),
+		url(../fonts/fa-solid-900.ttf) format("truetype")
+}
+@font-face{
+	font-family:"Font Awesome 5 Pro";
+	font-display:block;
+	font-weight:400;
+	src:url(../fonts/fa-regular-400.woff2) format("woff2"),
+		url(../fonts/fa-regular-400.ttf) format("truetype")
+}
+@font-face{
+	font-family:"Font Awesome 5 Pro";
+	font-display:block;
+	font-weight:300;
+	src:url(../fonts/fa-light-300.woff2) format("woff2"),
+		url(../fonts/fa-light-300.ttf) format("truetype")
+}
+@font-face{
+	font-family:"Font Awesome 5 Duotone";
+	font-display:block;
+	font-weight:900;
+	src:url(../fonts/fa-duotone-900.woff2) format("woff2"),
+		url(../fonts/fa-duotone-900.ttf) format("truetype")
+}
+@font-face{
+	font-family:"FontAwesome";
+	font-display:block;
+	src:url(../fonts/fa-solid-900.woff2) format("woff2"),
+		url(../fonts/fa-solid-900.ttf) format("truetype")
+}
+@font-face{
+	font-family:"FontAwesome";
+	font-display:block;
+	src:url(../fonts/fa-brands-400.woff2) format("woff2"),
+		url(../fonts/fa-brands-400.ttf) format("truetype")
+}
+@font-face{
+	font-family:"FontAwesome";
+	font-display:block;
+	src:url(../fonts/fa-regular-400.woff2) format("woff2"),
+		url(../fonts/fa-regular-400.ttf) format("truetype");
+	unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,
+		u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,
+		u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,
+		u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,
+		u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,
+		u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,
+		u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc;
+}
+@font-face{
+	font-family:"FontAwesome";
+	font-display:block;
+	src:url(../fonts/fa-v4compatibility.woff2) format("woff2"),
+		url(../fonts/fa-v4compatibility.ttf) format("truetype");
+	unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,
+		u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,
+		u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f250,u+f252,u+f27a;
+}
+@font-face{
+	font-family:"Font Awesome 6 Pro";
+	font-style:normal;
+	font-weight:300;
+	font-display:block;
+	src:url(../fonts/fa-light-300.woff2) format("woff2"),
+		url(../fonts/fa-light-300.ttf) format("truetype");
+}
+@font-face{
+	font-family:"Font Awesome 6 Brands";
+	font-style:normal;font-weight:400;
+	font-display:block;
+	src:url(../fonts/fa-brands-400.woff2) format("woff2"),
+	url(../fonts/fa-brands-400.ttf) format("truetype");
+}
+@font-face{
+	font-family:"Font Awesome 6 Duotone";
+	font-style:normal;font-weight:900;
+	font-display:block;
+	src:url(../fonts/fa-duotone-900.woff2) format("woff2"),
+	url(../fonts/fa-duotone-900.ttf) format("truetype");
+}
+
+:root{
+	--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro";
+	--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro";
+	--fa-font-light:normal 300 1em/1 "Font Awesome 6 Pro";
+	--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Pro";
+	--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands";
+	--fa-font-duotone:normal 900 1em/1 "Font Awesome 6 Duotone";
+}
+.fa{font-family:var(--fa-style-family,"Font Awesome 6 Pro");font-weight:var(--fa-style,900)}
+.fas{font-family:"Font Awesome 6 Pro";font-weight:900}
+.far{font-family:"Font Awesome 6 Pro";font-weight:400}
+.fal{font-family:"Font Awesome 6 Pro";font-weight:300}
+.fab{font-family:"Font Awesome 6 Brands";font-weight:400}
+.fad{
+	position:relative;
+	font-family:"Font Awesome 6 Duotone";
+	font-weight:900;
+	letter-spacing:normal;
+}
+.fad:before{
+	position:absolute;
+	color:var(--fa-primary-color,inherit);
+	opacity:var(--fa-primary-opacity,1);
+}
+.fad:after{
+	color:var(--fa-secondary-color,inherit);
+}
+.fad:after{
+	opacity:var(--fa-secondary-opacity,.4);
+}
+.fa,.fab,.fad,.fal,.far,.fas{
+	-moz-osx-font-smoothing:grayscale;
+	-webkit-font-smoothing:antialiased;
+	display:var(--fa-display,inline-block);
+	font-style:normal;
+	font-variant:normal;
+	line-height:1;
+	text-rendering:auto;
+}
+
+.fa-2x{font-size:2em}
+.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}
+.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}
+.fa-fw{text-align:center;width:1.25em}
+.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
+.fa-stack{
+	display:inline-block;
+	height:2em;
+	line-height:2em;
+	position:relative;
+	vertical-align:middle;
+	width:2.5em;
+}
+.fa-stack-1x,.fa-stack-2x{
+	left:0;
+	position:absolute;
+	text-align:center;
+	width:100%;
+	z-index:var(--fa-stack-z-index,auto);
+}
+.fa-stack-1x{line-height:inherit}
+.fa-stack-2x{font-size:2em}
+
+.fa-align-left:before{content:"\f036"}
+.fa-long-arrow-left:before{content:"\f177"}
+.fa-arrow-right:before{content:"\f061"}
+.fa-sign-out:before{content:"\f08b"}
+.fa-long-arrow-right:before{content:"\f178"}
+.fa-arrows-v:before{content:"\f07d"}
+.fa-award:before{content:"\f559"}
+.fa-badge:before{content:"\f335"}
+.fa-badge-check:before{content:"\f336"}
+.fa-ban:before{content:"\f05e"}
+.fa-bars:before{content:"\f0c9"}
+.fa-bell:before{content:"\f0f3"}
+.fa-bold:before{content:"\f032"}
+.fa-book:before{content:"\f02d"}
+.fa-book-open:before{content:"\f518"}
+.fa-book-dead:before{content:"\f6b7"}
+.fa-broom:before{content:"\f51a"}
+.fa-bug:before{content:"\f188"}
+.fa-bullhorn:before{content:"\f0a1"}
+.fa-calendar:before{content:"\f133"}
+.fa-calendar-day:before{content:"\f783"}
+.fa-calendar-alt:before{content:"\f073"}
+.fa-calendar-week:before{content:"\f784"}
+.fa-campfire:before{content:"\f6ba"}
+.fa-candy-cane:before{content:"\f786"}
+.fa-car-tilt:before{content:"\f5e5"}
+.fa-cat:before{content:"\f6be"}
+.fa-check:before{content:"\f00c"}
+.fa-circle:before{content:"\f111"}
+.fa-check-circle:before{content:"\f058"}
+.fa-arrow-alt-circle-down:before{content:"\f358"}
+.fa-exclamation-circle:before{content:"\f06a"}
+.fa-info-circle:before{content:"\f05a"}
+.fa-radiation-alt:before{content:"\f7ba"}
+.fa-arrow-alt-circle-up:before{content:"\f35b"}
+.fa-user-circle:before{content:"\f2bd"}
+.fa-times-circle:before{content:"\f057"}
+.fa-clipboard:before{content:"\f328"}
+.fa-clipboard-check:before{content:"\f46c"}
+.fa-clock:before{content:"\f017"}
+.fa-history:before{content:"\f1da"}
+.fa-code:before{content:"\f121"}
+.fa-comment:before{content:"\f075"}
+.fa-comment-dots:before{content:"\f4ad"}
+.fa-comments:before{content:"\f086"}
+.fa-copy:before{content:"\f0c5"}
+.fa-crown:before{content:"\f521"}
+.fa-dice-six:before{content:"\f526"}
+.fa-dollar-sign:before{content:"\24"}
+.fa-arrow-alt-down:before{content:"\f354"}
+.fa-compress-alt:before{content:"\f422"}
+.fa-ellipsis-h:before{content:"\f141"}
+.fa-envelope:before{content:"\f0e0"}
+.fa-envelope-open-text:before{content:"\f658"}
+.fa-eye:before{content:"\f06e"}
+.fa-eye-evil:before{content:"\f6db"}
+.fa-eye-slash:before{content:"\f070"}
+.fa-angry:before{content:"\f556"}
+.fa-frown:before{content:"\f119"}
+.fa-grin-beam-sweat:before{content:"\f583"}
+.fa-laugh-squint:before{content:"\f59b"}
+.fa-smile-beam:before{content:"\f5b8"}
+.fa-feather-alt:before{content:"\f56b"}
+.fa-file-signature:before{content:"\f573"}
+.fa-filter:before{content:"\f0b0"}
+.fa-fire:before{content:"\f06d"}
+.fa-fireplace:before{content:"\f79a"}
+.fa-fish:before{content:"\f578"}
+.fa-flag:before{content:"\f024"}
+.fa-flag-usa:before{content:"\f74d"}
+.fa-save:before{content:"\f0c7"}
+.fa-gavel:before{content:"\f0e3"}
+.fa-cog:before{content:"\f013"}
+.fa-ghost:before{content:"\f6e2"}
+.fa-gift:before{content:"\f06b"}
+.fa-gingerbread-man:before{content:"\f79d"}
+.fa-globe:before{content:"\f0ac"}
+.fa-golf-club:before{content:"\f451"}
+.fa-home-alt:before{content:"\f015"}
+.fa-id-badge:before{content:"\f2c1"}
+.fa-id-card:before{content:"\f2c2"}
+.fa-image:before{content:"\f03e"}
+.fa-infinity:before{content:"\f534"}
+.fa-italic:before{content:"\f033"}
+.fa-knife-kitchen:before{content:"\f6f5"}
+.fa-lights-holiday:before{content:"\f7b2"}
+.fa-link:before{content:"\f0c1"}
+.fa-lock:before{content:"\f023"}
+.fa-lock-alt:before{content:"\f30d"}
+.fa-search:before{content:"\f002"}
+.fa-memory:before{content:"\f538"}
+.fa-comment-alt-smile:before{content:"\f4aa"}
+.fa-microphone-stand:before{content:"\f8cb"}
+.fa-palette:before{content:"\f53f"}
+.fa-edit:before{content:"\f044"}
+.fa-pizza-slice:before{content:"\f818"}
+.fa-poop:before{content:"\f619"}
+.fa-quote-right:before{content:"\f10e"}
+.fa-reply:before{content:"\f3e5"}
+.fa-robot:before{content:"\f544"}
+.fa-sack-dollar:before{content:"\f81d"}
+.fa-scroll-old:before{content:"\f70f"}
+.fa-seedling:before{content:"\f4d8"}
+.fa-shield:before{content:"\f132"}
+.fa-random:before{content:"\f074"}
+.fa-smoke:before{content:"\f760"}
+.fa-snooze:before{content:"\f880"}
+.fa-snowflake:before{content:"\f2dc"}
+.fa-sparkles:before{content:"\f890"}
+.fa-ticket:before{content:"\f145"}
+.fa-cards:before{content:"\e3ed"}
+.fa-spider:before{content:"\f717"}
+.fa-square:before{content:"\f0c8"}
+.fa-stocking:before{content:"\f7d5"}
+.fa-store:before{content:"\f54e"}
+.fa-columns:before{content:"\f0db"}
+.fa-thumbtack:before{content:"\f08d"}
+.fa-train:before{content:"\f238"}
+.fa-trash-alt:before{content:"\f2ed"}
+.fa-exclamation-triangle:before{content:"\f071"}
+.fa-trophy:before{content:"\f091"}
+.fa-arrow-alt-up:before{content:"\f357"}
+.fa-expand-alt:before{content:"\f424"}
+.fa-external-link-alt:before{content:"\f35d"}
+.fa-user:before{content:"\f007"}
+.fa-user-crown:before{content:"\f6a4"}
+.fa-user-cog:before{content:"\f4fe"}
+.fa-user-friends:before{content:"\f500"}
+.fa-user-lock:before{content:"\f502"}
+.fa-user-minus:before{content:"\f503"}
+.fa-user-plus:before{content:"\f234"}
+.fa-user-slash:before{content:"\f506"}
+.fa-user-tag:before{content:"\f507"}
+.fa-user-times:before{content:"\f235"}
+.fa-users:before{content:"\f0c0"}
+.fa-volume:before{content:"\f6a8"}
+.fa-volume-mute:before{content:"\f6a9"}
+.fa-times:before{content:"\f00d"}
+.fa-android:before{content:"\f17b"}
+.fa-discord:before{content:"\f392"}
+.fa-github:before{content:"\f09b"}
+.fa-twitter:before{content:"\f099"}
+.fa-head-side:before{content:"\f6e9"}
+.fa-crab:before{content:"\e3ff"}
+.fa-socks:before{content:"\f696"}
+.fa-arrow-up:before{content:"\f062"}
+.fa-tag:before{content:"\f02b"}
+.fa-messages:before{content:"\f4b6"}
+.fa-user-secret:before{content:"\f21b"}
+.fa-gas-pump-slash:before{content:"\f5f4"}
+.fa-gas-pump:before{content:"\f52f"}
+.fa-hammer-crash:before{content:"\e414"}
+.fa-music:before{content:"\f001"}
+.fa-arrow-rotate-right:before{content:"\f01e"}
+.fa-columns-3:before{content:"\e361"}
+.fa-bahai:before{content:"\f666"}
+.fa-party-horn:before{content:"\e31b"}
+.fa-pinata:before{content:"\e3c3"}
+.fa-file:before{content:"\f15b"}
+.fa-box-open:before{content:"\f49e"}
+.fa-eyes:before{content:"\e367"}
+.fa-hexagon:before{content:"\f312"}
+.fa-arrow-right-arrow-left:before{content:"\f0ec"}
+.fa-coins:before{content:"\f51e"}
+.fa-bell-slash:before{content:"\f1f6"}
+.fa-chart-network:before{content:"\f78a"}
+.fa-square-share-nodes:before{content:"\f1e1"}
+.fa-sidebar:before{content:"\e24e"}
+.fa-panorama:before{content:"\e209"}
+.fa-external-link:before{content:"\f08e"}
+.fa-circle-info:before{content:"\f05a"}
+.fa-comment-question:before{content:"\e14b"}
+.fa-sitemap:before{content:"\f0e8"}
+.fa-grid:before{content:"\e195"}
+.fa-x:before{content:"\58"}
+.fa-paw-simple:before{content:"\f701"}
+.fa-bat:before{content:"\f6b5"}
+.fa-star-of-david:before{content:"\f69a"}
+.fa-hat-cowboy:before{content:"\f8c0"}
+.fa-cloud-rainbow:before{content:"\f73e"}
+.fa-telegram:before{content:"\f2c6"}
+.fa-css3-alt:before{content:"\f38b"}
+.fa-landscape:before{content:"\e1b5"}
+.fa-user-ninja:before{content:"\f504"}
+.fa-club:before{content:"\f327"}
diff --git a/files/assets/css/main-dev.css b/files/assets/css/main-dev.css
new file mode 100644
index 000000000..f17cd9aa1
--- /dev/null
+++ b/files/assets/css/main-dev.css
@@ -0,0 +1,804 @@
+/************************************************
+ *               Main-rewrite file              *
+ *               Live Debootstrap               *
+ ************************************************/
+
+
+/* TODO move to html ref for compatibility */
+@import url("fontawesome.css");
+
+@charset "UTF-8";
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+.modal
+{
+    display: none;
+}
+/* END Temporary */
+
+html, body {
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 400;
+	line-height: 1.5;
+	color: var(--white, #212529);
+	background-color: var(--body-background, #fff);
+}
+
+/* Make all links look like regular text
+ *
+ * A lot of links are used as buttons and stuff, so if you want to
+ * make a regular link, undo these for specific areas like post content, etc */
+a, a:visited, a:hover, a:active {
+    text-decoration: none;
+    color: var(--primary, #000);
+}
+
+/* Font stuff */
+html, body, input, a, button {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+/* Hide focus thing */
+[tabindex="-1"]:focus:not(:focus-visible) {
+	outline: 0 !important;
+}
+
+/* Unlinkify "links" */
+.srd a {
+    color: var(--white, #fff);
+}
+
+.srd {
+    display: block;
+    text-align: center;
+    background-color: var(--primary);
+    padding: 2px;
+    color: #fff;
+}
+
+nav {
+    position: sticky;
+    top: 0px;
+    z-index: 999;
+}
+
+#navbar {
+    width: 100%;
+    top: 0px;
+    display: flex;
+    flex-direction: row;
+    padding: 6px 16px 6px 12px;
+    align-items: center;
+    flex-wrap: nowrap;
+    font-size: .9rem;
+    background-color: var(--navbar, #fff);
+}
+
+#navbar i,
+.dropdown-menu i
+{
+    margin-right: 12px;
+    font-size: 1rem;
+}
+
+#navbar i
+{
+    vertical-align: middle;
+}
+
+.header--currency {
+    margin-right: 3px;
+    display: inline;
+}
+
+.header--currency img
+{
+    max-height: 13px;
+    margin-right: 2px;
+    vertical-align: middle;
+}
+
+.header--currency span
+{
+    vertical-align: middle;;
+}
+
+.dropdown-btn {
+    cursor: pointer;
+}
+
+.navbar-nav {
+    display: inline-block;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* .container { */
+/*     display: flex; */
+/* } */
+
+#login {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+    padding-top: 0;
+}
+
+#register-form-container {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+
+}
+
+#register-form {
+    flex: 0 0 58.3333333333%;
+    align-self: center;
+    min-width: 100px;
+}
+
+.splash-wrapper
+{
+    position: relative;
+    width: 50%;
+}
+
+.splash-wrapper:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(127,127,127,.25);
+    background-image: linear-gradient(135deg,rgba(30,30,36,0.1) 0%,var(--primary) 150%);
+    z-index: 50;
+}
+
+.splash-img
+{
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-position: bottom;
+    object-fit: cover;
+}
+
+#frontpage #main-content-view {
+    display: flex;
+    flex: 1;
+}
+
+#main-content { flex-grow: 1; }
+
+#submit .submit-view
+{
+    padding: 2px 42px;
+}
+
+.sidebar {
+    max-width: 300px;
+}
+
+.custom-gutters {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.dropdown-menu {
+    position: absolute;
+    display: none;
+    width: 210px;
+    padding: 5px;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background-color: var(--background, #fff);
+    box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.13);
+}
+
+.dropdown-menu .dropdown-item {
+    display: block;
+    padding: 6px 8px;
+    margin: 1px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--white, #000);
+    font-size: 0.9rem;
+    border: 1px solid transparent;
+    text-decoration: none;
+}
+
+.dropdown-menu .dropdown-item:hover {
+    background-color: var(--trinary, #efefef);
+    border: 1px solid var(--trinary-tint, #bababa);
+}
+
+@keyframes expand
+{
+    0% { opacity: 0.0; transform: scaleY(0.7) scaleX(0.9); }
+    100% { opacity: 1.0; transform: scaleY(1.0) scaleX(1.0); }
+}
+
+.dropdown-menu-right {
+    margin-top: 2px;
+    right: 0px;
+    box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.13);
+}
+
+
+.dropdown-item.dropdown-item-sub .dropdown-menu
+{
+    position: absolute;
+    margin-top: -35px;
+    left: -210px;
+    display: block;
+    opacity: 0.0;
+    visibility: hidden;
+    transition: visibility .2s .1s, left .2s .2s, opacity .2s .1s;
+}
+
+/* Since there's a gap, make it disappear with a delay */
+
+.dropdown-item.dropdown-item-sub:hover .dropdown-menu
+{
+    
+    transition: visibility .2s 0s, left .2s 0s, opacity .2s 0s;
+    left: -215px;
+    opacity: 1.0;
+    visibility: visible;
+}
+
+#dropdownMenuLink {
+    display: inline-block;
+}
+
+.navbar-nav-mobile {
+    display: none;
+}
+
+.dropdown-label {
+    display: inline-block;
+}
+
+.user-info,
+.profile {
+    display: inline-block;
+}
+
+.user-info {
+    font-size: .7rem;
+    vertical-align: middle;
+}
+
+.profile {
+    vertical-align: middle;
+}
+
+.profile-pic-navbar {
+    display: inline-block;
+    object-fit: cover;
+    border-radius: 50%;
+    width: 35px;
+    height: 35px;
+    border: 1px solid #cacaca;
+}
+
+.pronouns
+{
+    font-size: 9px;
+    margin-left: .25rem;
+    font-weight: 700;
+    padding: 2px 5px 3px;
+    border-radius: 5px;
+    border: 2px solid transparent;
+}
+
+.checkbox-display {
+    display: flex;
+}
+
+.checkbox-display:checked + .dropdown-menu
+{
+    display: block;
+    transform-origin: top;
+    animation: expand .16s 1;
+}
+
+.nav-item
+{
+    vertical-align: middle;
+}
+
+.navbar-nav li.nav-item {
+    display: inline-block;
+}
+
+
+#logo {
+    flex-grow: 1;
+}
+
+#logo img
+{
+    width: 100px;
+}
+
+.brand, #logo
+{
+    display: flex;
+    align-items: center;
+}
+
+/* Input stuff */
+.search-input, input[type=text], input[type=url], input[type=password], input[type=email], .pseudo-textbox {
+    border-radius: 4px;
+    border: 2px solid var(--background-tint, #cacaca);
+    padding: 6px 10px;
+    cursor: text;
+    color: var(--muted, #404040);
+    background-color: var(--background, #fafafa);
+}
+
+.pseudo-submit-form {
+    margin-bottom: 8px;
+}
+
+.search-input {
+    width: 400px;
+
+    /* Cheat the searchbox forward a tiny bit, it's off place */
+    position: relative;
+    left: 30px;
+}
+
+.search-icon
+{
+    position: relative;
+    color: var(--muted, #606060);
+}
+
+.toast {
+    display: none;
+    position: fixed;
+    bottom: 1.5rem;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    width: 375px;
+    text-align: center;
+    z-index: 1000;
+    background-color: var(--secondary);
+    color: #fff;
+    padding: 10px 15px;
+    border-radius: 6px;
+    border: 1px solid var(--gray-400);
+}
+
+.toast i
+{
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+#formkey { display: none; }
+
+.sub-name {}
+
+#navbarResponsive {
+    display: flex;
+    flex-grow: 2;
+    flex-direction: row;
+    justify-content: flex-end;
+    
+}
+
+/* Mobile stuff */
+.mobile-nav-icon,
+.navbar-toggler
+{
+    display: none;
+}
+
+.card {
+    display: block;
+    border: 1px solid var(--gray-100);
+    border-radius: 4px;
+}
+
+.card-title {
+    text-transform: uppercase;
+    color: 1px solid var(--gray-300);
+}
+
+.card-header {
+    display: block;
+    border-bottom: 1px solid var(--gray-100);
+}
+
+.card-body, .card-header {
+    padding: 8px;
+}
+
+.card-body {
+    
+}
+
+.btn {
+    display: inline-block;
+    padding: 4px 15px;
+    background-color: unset;
+    border: 1px solid var(--background-tint, #dadada);
+    color: var(--white, #000);
+    font-size: .9rem;
+    min-height: 32px;
+    cursor: pointer;
+    border-radius: 3px;
+    margin: 2px;
+    text-decoration: none;
+}
+
+.btn-primary {
+    border: 1px solid var(--primary, #dadada);
+    font-weight: bold;
+}
+
+.input-block {
+    display: block;
+}
+
+.form-header {
+    margin-bottom: 24px;
+}
+
+.form-header-text {
+    font-size: 1.7rem;
+    font-weight: bold;
+    margin-bottom: 3px;
+}
+
+.form-header-text-alt {
+    margin: 5px 1px;
+    font-size: 0.9rem;
+}
+
+.btn i  {
+    margin-right: 4px;
+}
+
+.flex-gap {
+    flex: 1;
+}
+
+.editor textarea {
+    border: unset;
+    color: var(--white, #000);
+    background-color: var(--background, #fff);
+}
+
+.editor {
+    display: flex;
+    flex-direction: column;
+    width: 700px;
+    border: 2px solid var(--background-tint, #dadada);
+    border-radius: 4px;
+}
+
+.editor .editor-footer {
+    display: flex;
+    flex-direction: row;
+    background-color: var(--body-background, #fff);
+    z-index: 5;
+    padding: 4px;
+    border-top: 1px solid #cacaca;
+}
+
+.editor .character-count {
+    margin-top: -20px;
+    font-size: 0.8rem;
+    margin-left: 4px;
+}
+
+.form-title {
+    display: block;
+    font-weight: bold;
+    margin: 9px 1px 4px;
+    font-size: 0.75rem;
+}
+
+.form-block {
+    display: block;
+    width: 100%;
+}
+
+.account-already-have {
+    font-size: 0.75rem;
+    margin-top: 36px;
+    text-align: center;
+}
+
+.terms {
+    font-size: 0.8rem;
+}
+
+.error-icon {
+    text-align: center;
+}
+
+.error-icon .fa-ghost {
+    text-align: center;
+    color: var(--background);
+}
+
+
+/* One thing I'll keep from bootstrap... */
+/* .d-none { */
+/*     display: none !important; */
+/* } */
+
+.form-title-alt {
+    display: inline;
+    font-weight: normal;
+    color: var(--gray-200, #303030);
+    font-size: 0.75rem;
+}
+
+.form-text {
+    display: block;
+    font-size: 0.7rem;
+}
+
+.submit-form-wrapper {
+    display: flex;
+}
+
+.submit-form-wrapper input[type=text],
+.submit-form-wrapper input[type=url] {
+    flex: 1;
+}
+
+.submit-form-wrapper .editor {
+    flex: 1;
+    width: 100%;
+}
+
+.form-group {
+    display: block;
+    margin-bottom: 12px;
+}
+
+/* Button group */
+.input-group {
+    display: flex;
+    flex-direction: row;
+}
+
+.input-group .btn
+{
+    border-radius: 0;
+    border-right: 0;
+    margin: 2px 0;
+}
+
+.input-group .btn:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.input-group .btn:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-right: 1px solid #cacaca;
+}
+
+.button-tabs {
+    display: flex;
+    justify-content: flex-end;
+    padding: 6px;
+    padding-right: 0;
+}
+
+.form-bottom-submit {
+    display: flex;
+    flex-direction: row;
+}
+
+.submit-view {
+    margin-bottom: 324px;
+}
+
+.fixed-bottom {
+    padding: 12px;
+    border-top: 1px solid var(--background, #cacaca);
+    z-index: 100;
+    background-color: var(--body-background, #fff);
+    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+    width: 100%;
+}
+
+.submit-pseudo-text {
+    display: block;
+    height: 30px;
+    width: 100%;
+}
+
+.submission {
+    display: flex;
+    flex-direction: row;
+}
+
+#post-content {
+    flex-grow: 1;
+}
+
+.submission .profile-pic,
+#post-content .profile-pic,
+.user-info .profile-pic {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    vertical-align: middle;
+}
+
+.post-actions {
+    font-size: .9rem;
+}
+
+.post-actions i {
+    margin-right: 5px;
+}
+
+.post-actions a {
+    color: #000;
+    padding: 4px;
+    margin-right: 3px;
+    display: inline-block;
+}
+
+.submission-meta {
+    font-size: 0.85rem;
+}
+
+.submission-title {
+    font-size: 1.1rem;
+    margin-bottom: 3px;
+    font-weight: bold;
+}
+
+.post-actions-mobile {
+    display: none;
+}
+
+.submission-content {
+    display: none;
+}
+
+.post-meta {
+    vertical-align: middle;
+    padding: 4px;
+}
+
+/* Big submissions */
+.post-root {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.post-root .post-img {
+
+}
+
+.post-img {
+    width: 100px;
+    height: 70px;
+    object-fit: cover;
+    background-color: var(--gray-300);
+    border: .1px solid var(--background);
+    border-radius: .35rem;
+}
+
+/* Voting buttons */
+.arrow-up::before {
+	cursor: pointer;
+	font-size: 1.3rem;
+	color: var(--gray-200);
+	font-family: "font awesome 5 pro" !important;
+	font-weight: 900;
+	content: "\f357";
+}
+
+.arrow-down::before {
+	cursor: pointer;
+	font-size: 1.3rem;
+	color: var(--gray-200);
+	font-family: "font awesome 5 pro" !important;
+	font-weight: 900;
+	content: "\f354";
+}
+
+.voting {
+    text-align: center;
+    padding: 3px 4px;
+    margin-left: 7px;
+}
+
+/* Everything below is best applied last */
+.d-none, .hidden {
+    /* Important disabled because the old navbar is autistic */
+    display: none /* !important */;
+}
+
+/****************************************
+ *         Speed Carot Model            *
+ *      i.e. inline Emoji picker        *
+ ****************************************/
+.ghostdiv
+{
+    display: block;
+    white-space: pre-wrap;
+    word-break: break-word;
+    /* Attempt to copy the textarea/input padding */
+    padding: 15px;
+}
+
+#speed-carot-modal
+{
+    background-color: var(--gray-700);
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#speed-carot-modal .speed-modal-option
+{
+    border-bottom: 1px solid #606060;
+    padding: 4px;
+    cursor: pointer;
+}
+
+#speed-carot-modal .speed-modal-option:hover,
+#speed-carot-modal .speed-modal-option:focus,
+#speed-carot-modal .speed-modal-option.selected
+{
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+
+#speed-carot-modal .speed-modal-image
+{
+    object-fit: contain;
+    width: 50px;
+    height: 50px;
+}
+
+#speed-carot-modal .speed-modal-option span
+{
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.rainbow-text {
+	background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
+    color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
+    font-weight: 700;
+}
diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 5530591e7..182353668 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -1,3 +1,12 @@
+/************************************************
+ *        !!!!!!!!!! ALERT !!!!!!!!!!           *
+ *     Debootstraping process is going live,    *
+ *  Please avoid working in this file wherever  *
+ *     possible! Thanks and fuck you if you     *
+ *             work in this file!               *
+ ************************************************/
+
+@import url("fontawesome.css");
 @charset "UTF-8";
 *, *::before, *::after {
 	box-sizing: border-box;
@@ -5673,371 +5682,6 @@ g {
     border-radius:.35rem;
 }
 
-/* ------- Font Awesome ------- */
-@font-face{
-	font-family:"Font Awesome 6 Pro";
-	font-style:normal;
-	font-weight:400;
-	font-display:block;
-	src:url(../fonts/fa-regular-400.woff2) format("woff2"),
-		url(../fonts/fa-regular-400.ttf) format("truetype")
-}
-@font-face{
-	font-family:"Font Awesome 6 Pro";
-	font-style:normal;
-	font-weight:900;
-	font-display:block;
-	src:url(../fonts/fa-solid-900.woff2) format("woff2"),
-		url(../fonts/fa-solid-900.ttf) format("truetype")
-}
-@font-face{
-	font-family:"Font Awesome 6 Pro";
-	font-style:normal;
-	font-weight:100;
-	font-display:block;
-	src:url(../fonts/fa-thin-100.woff2) format("woff2"),
-		url(../fonts/fa-thin-100.ttf) format("truetype")
-}
-@font-face{
-	font-family:"Font Awesome 5 Brands";
-	font-display:block;
-	font-weight:400;
-	src:url(../fonts/fa-brands-400.woff2) format("woff2"),
-		url(../fonts/fa-brands-400.ttf) format("truetype")
-}
-@font-face{
-	font-family:"Font Awesome 5 Pro";
-	font-display:block;
-	font-weight:900;
-	src:url(../fonts/fa-solid-900.woff2) format("woff2"),
-		url(../fonts/fa-solid-900.ttf) format("truetype")
-}
-@font-face{
-	font-family:"Font Awesome 5 Pro";
-	font-display:block;
-	font-weight:400;
-	src:url(../fonts/fa-regular-400.woff2) format("woff2"),
-		url(../fonts/fa-regular-400.ttf) format("truetype")
-}
-@font-face{
-	font-family:"Font Awesome 5 Pro";
-	font-display:block;
-	font-weight:300;
-	src:url(../fonts/fa-light-300.woff2) format("woff2"),
-		url(../fonts/fa-light-300.ttf) format("truetype")
-}
-@font-face{
-	font-family:"Font Awesome 5 Duotone";
-	font-display:block;
-	font-weight:900;
-	src:url(../fonts/fa-duotone-900.woff2) format("woff2"),
-		url(../fonts/fa-duotone-900.ttf) format("truetype")
-}
-@font-face{
-	font-family:"FontAwesome";
-	font-display:block;
-	src:url(../fonts/fa-solid-900.woff2) format("woff2"),
-		url(../fonts/fa-solid-900.ttf) format("truetype")
-}
-@font-face{
-	font-family:"FontAwesome";
-	font-display:block;
-	src:url(../fonts/fa-brands-400.woff2) format("woff2"),
-		url(../fonts/fa-brands-400.ttf) format("truetype")
-}
-@font-face{
-	font-family:"FontAwesome";
-	font-display:block;
-	src:url(../fonts/fa-regular-400.woff2) format("woff2"),
-		url(../fonts/fa-regular-400.ttf) format("truetype");
-	unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,
-		u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,
-		u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,
-		u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,
-		u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,
-		u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,
-		u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc;
-}
-@font-face{
-	font-family:"FontAwesome";
-	font-display:block;
-	src:url(../fonts/fa-v4compatibility.woff2) format("woff2"),
-		url(../fonts/fa-v4compatibility.ttf) format("truetype");
-	unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,
-		u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,
-		u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f250,u+f252,u+f27a;
-}
-@font-face{
-	font-family:"Font Awesome 6 Pro";
-	font-style:normal;
-	font-weight:300;
-	font-display:block;
-	src:url(../fonts/fa-light-300.woff2) format("woff2"),
-		url(../fonts/fa-light-300.ttf) format("truetype");
-}
-@font-face{
-	font-family:"Font Awesome 6 Brands";
-	font-style:normal;font-weight:400;
-	font-display:block;
-	src:url(../fonts/fa-brands-400.woff2) format("woff2"),
-	url(../fonts/fa-brands-400.ttf) format("truetype");
-}
-@font-face{
-	font-family:"Font Awesome 6 Duotone";
-	font-style:normal;font-weight:900;
-	font-display:block;
-	src:url(../fonts/fa-duotone-900.woff2) format("woff2"),
-	url(../fonts/fa-duotone-900.ttf) format("truetype");
-}
-
-:root{
-	--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro";
-	--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro";
-	--fa-font-light:normal 300 1em/1 "Font Awesome 6 Pro";
-	--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Pro";
-	--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands";
-	--fa-font-duotone:normal 900 1em/1 "Font Awesome 6 Duotone";
-}
-.fa{font-family:var(--fa-style-family,"Font Awesome 6 Pro");font-weight:var(--fa-style,900)}
-.fas{font-family:"Font Awesome 6 Pro";font-weight:900}
-.far{font-family:"Font Awesome 6 Pro";font-weight:400}
-.fal{font-family:"Font Awesome 6 Pro";font-weight:300}
-.fab{font-family:"Font Awesome 6 Brands";font-weight:400}
-.fad{
-	position:relative;
-	font-family:"Font Awesome 6 Duotone";
-	font-weight:900;
-	letter-spacing:normal;
-}
-.fad:before{
-	position:absolute;
-	color:var(--fa-primary-color,inherit);
-	opacity:var(--fa-primary-opacity,1);
-}
-.fad:after{
-	color:var(--fa-secondary-color,inherit);
-}
-.fad:after{
-	opacity:var(--fa-secondary-opacity,.4);
-}
-.fa,.fab,.fad,.fal,.far,.fas{
-	-moz-osx-font-smoothing:grayscale;
-	-webkit-font-smoothing:antialiased;
-	display:var(--fa-display,inline-block);
-	font-style:normal;
-	font-variant:normal;
-	line-height:1;
-	text-rendering:auto;
-}
-
-.fa-2x{font-size:2em}
-.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}
-.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}
-.fa-fw{text-align:center;width:1.25em}
-.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
-.fa-stack{
-	display:inline-block;
-	height:2em;
-	line-height:2em;
-	position:relative;
-	vertical-align:middle;
-	width:2.5em;
-}
-.fa-stack-1x,.fa-stack-2x{
-	left:0;
-	position:absolute;
-	text-align:center;
-	width:100%;
-	z-index:var(--fa-stack-z-index,auto);
-}
-.fa-stack-1x{line-height:inherit}
-.fa-stack-2x{font-size:2em}
-
-.fa-align-left:before{content:"\f036"}
-.fa-long-arrow-left:before{content:"\f177"}
-.fa-arrow-right:before{content:"\f061"}
-.fa-sign-out:before{content:"\f08b"}
-.fa-long-arrow-right:before{content:"\f178"}
-.fa-arrows-v:before{content:"\f07d"}
-.fa-award:before{content:"\f559"}
-.fa-badge:before{content:"\f335"}
-.fa-badge-check:before{content:"\f336"}
-.fa-ban:before{content:"\f05e"}
-.fa-bars:before{content:"\f0c9"}
-.fa-bell:before{content:"\f0f3"}
-.fa-bold:before{content:"\f032"}
-.fa-book:before{content:"\f02d"}
-.fa-book-open:before{content:"\f518"}
-.fa-book-dead:before{content:"\f6b7"}
-.fa-broom:before{content:"\f51a"}
-.fa-bug:before{content:"\f188"}
-.fa-bullhorn:before{content:"\f0a1"}
-.fa-calendar:before{content:"\f133"}
-.fa-calendar-day:before{content:"\f783"}
-.fa-calendar-alt:before{content:"\f073"}
-.fa-calendar-week:before{content:"\f784"}
-.fa-campfire:before{content:"\f6ba"}
-.fa-candy-cane:before{content:"\f786"}
-.fa-car-tilt:before{content:"\f5e5"}
-.fa-cat:before{content:"\f6be"}
-.fa-check:before{content:"\f00c"}
-.fa-circle:before{content:"\f111"}
-.fa-check-circle:before{content:"\f058"}
-.fa-arrow-alt-circle-down:before{content:"\f358"}
-.fa-exclamation-circle:before{content:"\f06a"}
-.fa-info-circle:before{content:"\f05a"}
-.fa-radiation-alt:before{content:"\f7ba"}
-.fa-arrow-alt-circle-up:before{content:"\f35b"}
-.fa-user-circle:before{content:"\f2bd"}
-.fa-times-circle:before{content:"\f057"}
-.fa-clipboard:before{content:"\f328"}
-.fa-clipboard-check:before{content:"\f46c"}
-.fa-clock:before{content:"\f017"}
-.fa-history:before{content:"\f1da"}
-.fa-code:before{content:"\f121"}
-.fa-comment:before{content:"\f075"}
-.fa-comment-dots:before{content:"\f4ad"}
-.fa-comments:before{content:"\f086"}
-.fa-copy:before{content:"\f0c5"}
-.fa-crown:before{content:"\f521"}
-.fa-dice-six:before{content:"\f526"}
-.fa-dollar-sign:before{content:"\24"}
-.fa-arrow-alt-down:before{content:"\f354"}
-.fa-compress-alt:before{content:"\f422"}
-.fa-ellipsis-h:before{content:"\f141"}
-.fa-envelope:before{content:"\f0e0"}
-.fa-envelope-open-text:before{content:"\f658"}
-.fa-eye:before{content:"\f06e"}
-.fa-eye-evil:before{content:"\f6db"}
-.fa-eye-slash:before{content:"\f070"}
-.fa-angry:before{content:"\f556"}
-.fa-frown:before{content:"\f119"}
-.fa-grin-beam-sweat:before{content:"\f583"}
-.fa-laugh-squint:before{content:"\f59b"}
-.fa-smile-beam:before{content:"\f5b8"}
-.fa-feather-alt:before{content:"\f56b"}
-.fa-file-signature:before{content:"\f573"}
-.fa-filter:before{content:"\f0b0"}
-.fa-fire:before{content:"\f06d"}
-.fa-fireplace:before{content:"\f79a"}
-.fa-fish:before{content:"\f578"}
-.fa-flag:before{content:"\f024"}
-.fa-flag-usa:before{content:"\f74d"}
-.fa-save:before{content:"\f0c7"}
-.fa-gavel:before{content:"\f0e3"}
-.fa-cog:before{content:"\f013"}
-.fa-ghost:before{content:"\f6e2"}
-.fa-gift:before{content:"\f06b"}
-.fa-gingerbread-man:before{content:"\f79d"}
-.fa-globe:before{content:"\f0ac"}
-.fa-golf-club:before{content:"\f451"}
-.fa-home-alt:before{content:"\f015"}
-.fa-id-badge:before{content:"\f2c1"}
-.fa-id-card:before{content:"\f2c2"}
-.fa-image:before{content:"\f03e"}
-.fa-infinity:before{content:"\f534"}
-.fa-italic:before{content:"\f033"}
-.fa-knife-kitchen:before{content:"\f6f5"}
-.fa-lights-holiday:before{content:"\f7b2"}
-.fa-link:before{content:"\f0c1"}
-.fa-lock:before{content:"\f023"}
-.fa-lock-alt:before{content:"\f30d"}
-.fa-search:before{content:"\f002"}
-.fa-memory:before{content:"\f538"}
-.fa-comment-alt-smile:before{content:"\f4aa"}
-.fa-microphone-stand:before{content:"\f8cb"}
-.fa-palette:before{content:"\f53f"}
-.fa-edit:before{content:"\f044"}
-.fa-pizza-slice:before{content:"\f818"}
-.fa-poop:before{content:"\f619"}
-.fa-quote-right:before{content:"\f10e"}
-.fa-reply:before{content:"\f3e5"}
-.fa-robot:before{content:"\f544"}
-.fa-sack-dollar:before{content:"\f81d"}
-.fa-scroll-old:before{content:"\f70f"}
-.fa-seedling:before{content:"\f4d8"}
-.fa-shield:before{content:"\f132"}
-.fa-random:before{content:"\f074"}
-.fa-smoke:before{content:"\f760"}
-.fa-snooze:before{content:"\f880"}
-.fa-snowflake:before{content:"\f2dc"}
-.fa-sparkles:before{content:"\f890"}
-.fa-ticket:before{content:"\f145"}
-.fa-cards:before{content:"\e3ed"}
-.fa-spider:before{content:"\f717"}
-.fa-square:before{content:"\f0c8"}
-.fa-stocking:before{content:"\f7d5"}
-.fa-store:before{content:"\f54e"}
-.fa-columns:before{content:"\f0db"}
-.fa-thumbtack:before{content:"\f08d"}
-.fa-train:before{content:"\f238"}
-.fa-trash-alt:before{content:"\f2ed"}
-.fa-exclamation-triangle:before{content:"\f071"}
-.fa-trophy:before{content:"\f091"}
-.fa-arrow-alt-up:before{content:"\f357"}
-.fa-expand-alt:before{content:"\f424"}
-.fa-external-link-alt:before{content:"\f35d"}
-.fa-user:before{content:"\f007"}
-.fa-user-crown:before{content:"\f6a4"}
-.fa-user-cog:before{content:"\f4fe"}
-.fa-user-friends:before{content:"\f500"}
-.fa-user-lock:before{content:"\f502"}
-.fa-user-minus:before{content:"\f503"}
-.fa-user-plus:before{content:"\f234"}
-.fa-user-slash:before{content:"\f506"}
-.fa-user-tag:before{content:"\f507"}
-.fa-user-times:before{content:"\f235"}
-.fa-users:before{content:"\f0c0"}
-.fa-volume:before{content:"\f6a8"}
-.fa-volume-mute:before{content:"\f6a9"}
-.fa-times:before{content:"\f00d"}
-.fa-android:before{content:"\f17b"}
-.fa-discord:before{content:"\f392"}
-.fa-github:before{content:"\f09b"}
-.fa-twitter:before{content:"\f099"}
-.fa-head-side:before{content:"\f6e9"}
-.fa-crab:before{content:"\e3ff"}
-.fa-socks:before{content:"\f696"}
-.fa-arrow-up:before{content:"\f062"}
-.fa-tag:before{content:"\f02b"}
-.fa-messages:before{content:"\f4b6"}
-.fa-user-secret:before{content:"\f21b"}
-.fa-gas-pump-slash:before{content:"\f5f4"}
-.fa-gas-pump:before{content:"\f52f"}
-.fa-hammer-crash:before{content:"\e414"}
-.fa-music:before{content:"\f001"}
-.fa-arrow-rotate-right:before{content:"\f01e"}
-.fa-columns-3:before{content:"\e361"}
-.fa-bahai:before{content:"\f666"}
-.fa-party-horn:before{content:"\e31b"}
-.fa-pinata:before{content:"\e3c3"}
-.fa-file:before{content:"\f15b"}
-.fa-box-open:before{content:"\f49e"}
-.fa-eyes:before{content:"\e367"}
-.fa-hexagon:before{content:"\f312"}
-.fa-arrow-right-arrow-left:before{content:"\f0ec"}
-.fa-coins:before{content:"\f51e"}
-.fa-bell-slash:before{content:"\f1f6"}
-.fa-chart-network:before{content:"\f78a"}
-.fa-square-share-nodes:before{content:"\f1e1"}
-.fa-sidebar:before{content:"\e24e"}
-.fa-panorama:before{content:"\e209"}
-.fa-external-link:before{content:"\f08e"}
-.fa-circle-info:before{content:"\f05a"}
-.fa-comment-question:before{content:"\e14b"}
-.fa-sitemap:before{content:"\f0e8"}
-.fa-grid:before{content:"\e195"}
-.fa-x:before{content:"\58"}
-.fa-paw-simple:before{content:"\f701"}
-.fa-bat:before{content:"\f6b5"}
-.fa-star-of-david:before{content:"\f69a"}
-.fa-hat-cowboy:before{content:"\f8c0"}
-.fa-cloud-rainbow:before{content:"\f73e"}
-.fa-telegram:before{content:"\f2c6"}
-.fa-css3-alt:before{content:"\f38b"}
-.fa-landscape:before{content:"\e1b5"}
-.fa-user-ninja:before{content:"\f504"}
-.fa-club:before{content:"\f327"}
 
 .pronouns {
 	font-size: 9px;
diff --git a/files/assets/css/midnight.css b/files/assets/css/midnight.css
index 07e64ba44..49ec6a5ba 100644
--- a/files/assets/css/midnight.css
+++ b/files/assets/css/midnight.css
@@ -18,6 +18,8 @@
 	--gray-800: #161b22;
 	--gray-900: #0d1117;
 	--background: #21262d;
+    --navbar: #11161d;
+    --body-background: #21262d;
 }
 
 
diff --git a/files/templates/default.html b/files/templates/default.html
index 3243ac0a6..5a514df1b 100644
--- a/files/templates/default.html
+++ b/files/templates/default.html
@@ -14,25 +14,24 @@
 
 	{% if v %}
 		<style>:root{--primary:#{{v.themecolor}}}</style>
-		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
-		<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
-		<link rel="stylesheet" href="{{'css/awards.css' | asset}}">
-		{% if v.agendaposter %}
-			<style>
-				html {
-					cursor:url('/i/dildo.webp?v=2000'), auto;
-				}
-			</style>
-		{% elif v.css %}
-			<style>
-				{{v.css | safe}}
-			</style>
-		{% endif %}
 	{% else %}
 		<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-		<link rel="stylesheet" href="{{'css/main.css' | asset}}">
-		<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
-		<link rel="stylesheet" href="{{'css/awards.css' | asset}}">
+	{% endif %}
+	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+    <!-- COMMENT / UNCOMMENT FOR NEKOCEL DEV SHIT -->
+    <!-- <link rel="stylesheet" href="{{'css/main-dev.css' | asset}}"> -->
+	<link rel="stylesheet" href="{{('css/'~v.theme~'.css') | asset}}">
+	<link rel="stylesheet" href="{{'css/awards.css' | asset}}">
+	{% if v.agendaposter %}
+		<style>
+		 * {
+			 cursor:url('/i/dildo.webp') !important;
+		 }
+		</style>
+	{% elif v.css %}
+		<style>
+		 {{v.css | safe}}
+		</style>
 	{% endif %}
 
 	{% if request.path.endswith('/catalog') %}
@@ -104,8 +103,6 @@
 		<meta name="msapplication-config" content="/assets/browserconfig.xml?v=3009">
 		<meta name="theme-color" content="#{% if v %}{{v.themecolor}}{% else %}{{DEFAULT_COLOR}}{% endif %}">
 
-
-
 		<link
 		rel="apple-touch-startup-image"
 		sizes="320x480"
diff --git a/files/templates/login.html b/files/templates/login.html
index ff8b5b2be..14a6e8ff1 100644
--- a/files/templates/login.html
+++ b/files/templates/login.html
@@ -1,102 +1,87 @@
 {%- import 'util/helpers.html' as help -%}
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+	    <script defer src="{{'js/bootstrap.js' | asset}}"></script>
 
-<head>
-	<script defer src="{{'js/bootstrap.js' | asset}}"></script>
+	    <link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">
 
-	<link rel="icon" type="image/webp" href="{{'icon.webp' | asset_siteimg}}">
+	    <meta name="description" content="{{DESCRIPTION}}">
+	    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
 
-	<meta name="description" content="{{DESCRIPTION}}">
-	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';">
+	    <meta charset="utf-8">
+	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	    <meta name="author" content="">
 
-	<meta name="author" content="">
+	    {% block title %}
+	    <title>Login -	{{SITE_NAME}}</title>
+	    {% endblock %}
+	    
+	    <style>:root{--primary:#{{DEFAULT_COLOR}}</style>
+	    <link rel="stylesheet" href="{{'css/main-dev.css' | asset}}">
+	    <link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
 
-	{% block title %}
-	<title>Login -	{{SITE_NAME}}</title>
-	{% endblock %}
-	
-	<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
-	<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
+    </head>
 
-</head>
+    <body id="login">
+		<div id="register-form-container">
+            <div id="register-form">
+                <div class="form-header">
+			        <h1 class="form-header-text">Welcome back.</h1>
+			        <p class="form-header-text-alt">Glad to have you back!</p>
 
-<body id="login">
+                </div>
 
-<div class="container-fluid position-absolute h-100 p-0 overflow-auto">
-	<div class="row no-gutters h-100">
-		<div class="col-12 col-md-6 my-auto p-3">
-			<div class="row justify-content-center">
-				<div class="col-10 col-md-7">
+			    <form action="/login" method="post" class="mt-md-3" id="signup">
 
-					<div class="mb-5">
-							<a href="/" class="text-decoration-none"><span class="h3 text-primary">‎</span></a>
-					</div>
+				    {% if error %}<span class="text-danger">{{error}}</span><br>{% endif %}
 
-					{% block content %}
+				    <input type="hidden" name="formkey" value="{{formkey}}">
+				    <input type="hidden" name="now" value="{{now}}">
 
-					<div id="login-form" class="">
+				    {% if redirect %}<input type="hidden" name="redirect" value="{{redirect}}">{% endif %}
+				    {% if ref_user %}
+				    <input type="hidden" name="referred_by" value="{{ref_user.id}}">{% endif %}
 
-						<h1 class="h2">Welcome back.</h1>
+				    <label for="username-register" class="form-group">
+                        <span class="form-title">Username</span>
+                        <input autocomplete="off" class="form-block" id="username-register"
+					           aria-describedby="usernameHelpRegister" type="text" name="username" pattern="[a-zA-Z0-9_\-]{3,25}" min="3" max="25" required="">
+				        <small id="usernameHelpRegister"></small>
+                    </label>
 
-						<p class="text-muted mb-md-5">Glad to have you back!</p>
+				    <label for="password-register" class="form-group">
+                        <span class="form-title">Password</span>
+                    
+				        <input autocomplete="off" class="form-block" id="password-register"
+					           aria-describedby="passwordHelpReigster" type="password" name="password" required="">
+                        <small>
+                            <a href="/forgot">Forgot password?</a>
+                        </small>
+                    </label>
 
-						{% if failed %}
-						<div class="alert alert-danger alert-dismissible fade show d-flex my-3" role="alert">
-							<i class="fas fa-exclamation-circle my-auto"></i>
-							<div>
-									Incorrect username, email address, or password.
-									<br>
-									<a href="/forgot" class="alert-link">Forgot password?</a>
-							</div>
-							<button class="close" data-bs-dismiss="alert" aria-label="Close">
-								<span aria-hidden="true">&times;</span>
-						</button>
-						</div>
-						{% endif %}
+				    <button class="btn btn-primary form-block" id="register_button">Login</button>
 
-						<form action="/login" method="post" class="mt-md-3" id="login">
+				    <div class="account-already-have">
+                        Don't have an account? <a href="/signup{{'?redirect='+redirect if redirect else ''}}" class="font-weight-bold toggle-login">Sign up</a>
 
-								<label for="username" class="mt-3">Username or Email Address</label>
-
-								<input autocomplete="off" class="form-control" id="username" aria-describedby="usernameHelp"
-								type="text" name="username" required="">
-								<input type="hidden" name="redirect" value="{{redirect}}">
-
-								<label for="password" class="mt-3">Password</label>
-
-								<input autocomplete="off" class="form-control" id="password" aria-describedby="passwordHelp"
-								type="password" name="password" required="">
-
-
-								<small><a href="/forgot">Forgot password?</a></small>
-
-								<button class="btn btn-primary login w-100 mt-3" id="login_button">Sign In</button>
-
-								<div class="text-center text-muted text-small mt-5 mb-3">
-									Don't have an account? <a href="/signup{{'?redirect='+redirect if redirect else ''}}" class="font-weight-bold toggle-login">Sign up</a>
-								</div>
-						</form>
-					</div>
-
-					{% endblock %}
-				</div>
-			</div>
+				    </div>
+			    </form>
+            </div>
 		</div>
 
-		<div class="col-12 col-md-6 d-none d-md-block">
-			<div class="splash-wrapper">
-				<div class="splash-overlay"></div>
-				<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
-			</div>
+		<div class="splash-wrapper">
+			<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
 		</div>
-	</div>
-</div>
+        <script defer src="/assets/js/signup.js?v=4000"></script>
 
-</body>
+        {% if hcaptcha %}
+	    <script defer src="/assets/js/hcaptcha.js?v=4000"></script>
+        {% endif %}
+
+    </body>
 
 </html>
+
+
diff --git a/files/templates/sign_up.html b/files/templates/sign_up.html
index f87d66184..606ec3121 100644
--- a/files/templates/sign_up.html
+++ b/files/templates/sign_up.html
@@ -32,123 +32,97 @@
 	<title>{% if ref_user %}{{ref_user.username}} invites you to {{SITE_NAME}}{% else %}Sign up - {{SITE_NAME}}{% endif %}</title>
 
 	<style>:root{--primary:#{{DEFAULT_COLOR}}</style>
-	<link rel="stylesheet" href="{{'css/main.css' | asset}}">
+	<link rel="stylesheet" href="{{'css/main-dev.css' | asset}}">
 	<link rel="stylesheet" href="{{('css/'~DEFAULT_THEME~'.css') | asset}}">
 
 </head>
 
-<body id="login">
+    <body id="login">
+		<div id="register-form-container">
+            <div id="register-form">
+                <div class="form-header">
+			        {% if ref_user %}
+			        <h1 class="form-header-text">@{{ref_user.username}} has invited you!</h1>
+			        <p class="form-header-text-alt">Looks like someone wants you to join {{SITE_NAME}}.</p>
+			        {% else %}
+			        <h1 class="form-header-text">Create your account.</h1>
+			        <p class="form-header-text-alt">No email address required.</p>
+			        {% endif %}
+                </div>
 
-<div class="container-fluid position-absolute h-100 p-0 overflow-auto">
-	<div class="row no-gutters h-100">
+			    <form action="/signup" method="post" class="mt-md-3" id="signup">
 
-		<div class="col-12 col-md-6 my-auto p-3">
+				    {% if error %}<span class="text-danger">{{error}}</span><br>{% endif %}
 
-			<div class="row justify-content-center">
+				    <input type="hidden" name="formkey" value="{{formkey}}">
+				    <input type="hidden" name="now" value="{{now}}">
 
-				<div class="col-10 col-md-7">
+				    {% if redirect %}<input type="hidden" name="redirect" value="{{redirect}}">{% endif %}
+				    {% if ref_user %}
+				    <input type="hidden" name="referred_by" value="{{ref_user.id}}">{% endif %}
 
-					<div class="mb-3">
-						<a href="/" class="text-decoration-none"><span class="h3 text-primary">‎</span></a>
-					</div>
+				    <label for="username-register" class="form-group">
+                        <span class="form-title">Username</span>
+                        <input autocomplete="off" class="form-block" id="username-register"
+					           aria-describedby="usernameHelpRegister" type="text" name="username" pattern="[a-zA-Z0-9_\-]{3,25}" min="3" max="25" required="">
+				        <small id="usernameHelpRegister"></small>
+                    </label>
 
-					<div id="register-form" class="">
+				    <label for="email-register" class="form-group">
+                        <span class="form-title">Email Address <small class="form-title-alt">(optional)</small></span>
 
-						{% if ref_user %}
-						<h1 class="h2">@{{ref_user.username}} has invited you!</h1>
-						<p class="text-muted mb-md-2">Looks like someone wants you to join {{SITE_NAME}}.</p>
-						{% elif SITE_NAME == 'WPD' and site_settings['login_required'] %}
-						<p class="text-muted text-justify mb-1" style="line-height: 1.2em">
-							<strong>Hi you!</strong> &mdash; <span style="font-variant-caps: small-caps;">WatchPeopleDie.co</span> is currently doing our monthly 24(ish) hours of "everyone needs to have an account" &mdash; sorry about that! But making an account is actually super easy. <strong>You don't even need an email address!</strong> Literally just pick a username, set a password, and that's that. Bam, done, like 8 seconds, tops.<br>
-						</p>
-						<p class="text-muted mb-md-2">
-							We WANT you with us &#128150;<br>
-							Please join!
-						</p>
-						<hr>
-						{% else %}
-						<h1 class="h2">Create your account.</h1>
-						<p class="text-muted mb-md-2">No email address required.</p>
-						{% endif %}
+				        <input autocomplete="off" class="form-block" id="email-register"
+					           aria-describedby="emailHelpRegister" type="email" pattern='([A-Za-z0-9]+[.-_])*[A-Za-z0-9]+@[A-Za-z0-9-]+(\.[A-Z|a-z]{2,})+' name="email" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');this.blur();this.focus()}">
+                    </label>
 
-						<form action="/signup" method="post" class="mt-md-3" id="signup">
+				    <label for="password-register" class="form-group">
+                        <span class="form-title">Password</span>
+                    
+				        <input autocomplete="off" class="form-block" id="password-register"
+					           aria-describedby="passwordHelpReigster" type="password" name="password" required="">
+				        <small id="passwordHelpRegister" class="form-text font-weight-bold text-muted d-none mt-1">Minimum of 8
+					        characters
+					        required.</small>
+				        <small id="passwordHelpSuccess" class="form-text font-weight-bold text-success d-none mt-1">Your password meets the requirements.
+				        </small>
+                    </label>
 
-						{% if error %}<span class="text-danger">{{error}}</span><br>{% endif %}
+				    <label for="password_confirm" class="form-group">
+                        <span class="form-title">Confirm Password</span>
 
-						<input type="hidden" name="formkey" value="{{formkey}}">
-						<input type="hidden" name="now" value="{{now}}">
+				        <input autocomplete="off" class="form-block" id="password_confirm"
+					           aria-describedby="passwordConfirmHelp" type="password" name="password_confirm"
+					           required="">
 
-						{% if redirect %}<input type="hidden" name="redirect" value="{{redirect}}">{% endif %}
-						{% if ref_user %}
-						<input type="hidden" name="referred_by" value="{{ref_user.id}}">{% endif %}
+                    </label>
 
-						<label for="username-register" class="mt-3">Username</label>
+                    <label class="form-group terms" for="termsCheck">
+					    <input autocomplete="off" type="checkbox" id="termsCheck" required>
+					    I accept the <a href="/logged_out/sidebar">rules</a>
+				    </label>
 
-						<input autocomplete="off" class="form-control" id="username-register"
-						aria-describedby="usernameHelpRegister" type="text" name="username" pattern="[a-zA-Z0-9_\-]{3,25}" min="3" max="25" required="">
-						<small id="usernameHelpRegister"></small>
+				    {% if hcaptcha %}
+				    <div class="h-captcha" data-sitekey="{{hcaptcha}}"></div>
+				    {% endif %}
 
-						<label for="email-register" class="mt-3">Email Address</label>
-
-						<small class="d-inline-block text-muted ml-1">(optional)</small>
-
-						<input style="background-color: var(--gray-800)" autocomplete="off" class="form-control" id="email-register"
-						aria-describedby="emailHelpRegister" type="email" pattern='([A-Za-z0-9]+[.-_])*[A-Za-z0-9]+@[A-Za-z0-9-]+(\.[A-Z|a-z]{2,})+' name="email" readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');this.blur();this.focus()}">
-
-						<label for="password-register" class="mt-3">Password</label>
-
-						<input autocomplete="off" class="form-control" id="password-register"
-						aria-describedby="passwordHelpReigster" type="password" name="password" required="">
-						<small id="passwordHelpRegister" class="form-text font-weight-bold text-muted d-none mt-1">Minimum of 8
-							characters
-						required.</small>
-						<small id="passwordHelpSuccess" class="form-text font-weight-bold text-success d-none mt-1">Your password meets the requirements.
-						</small>
-
-						<label for="password_confirm" class="mt-3">Confirm Password</label>
-
-						<input autocomplete="off" class="form-control" id="password_confirm"
-						aria-describedby="passwordConfirmHelp" type="password" name="password_confirm"
-						required="">
-						<div class="custom-control custom-checkbox mt-4">
-							<input autocomplete="off" type="checkbox" class="custom-control-input" id="termsCheck" required>
-							<label class="custom-control-label terms" for="termsCheck">I accept the <a href="/sidebar">rules</a></label>
-						</div>
-
-						{% if hcaptcha %}
-							<div class="h-captcha" data-sitekey="{{hcaptcha}}" data-theme="dark"></div>
-						{% endif %}
-
-						<button class="btn btn-primary login w-100 mt-3" id="register_button">Register</button>
-
-						<div class="text-center text-muted text-small mt-5 mb-3">
-							Already have an account? <a href="/login{{'?redirect='+redirect if redirect else ''}}" class="font-weight-bold toggle-login">Log in</a>
-						</div>
-						</form>
-
-					</div>
-
-				</div>
-
-			</div>
+				    <button class="btn btn-primary form-block" id="register_button">Register</button>
 
+				    <div class="account-already-have">
+					    Already have an account? <a href="/login{{'?redirect='+redirect if redirect else ''}}" class="font-weight-bold toggle-login">Log in</a>
+				    </div>
+			    </form>
+            </div>
 		</div>
 
-		<div class="col-12 col-md-6 d-none d-md-block">
-			<div class="splash-wrapper">
-				<div class="splash-overlay"></div>
-				<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
-			</div>
+		<div class="splash-wrapper">
+			<img alt="cover" loading="lazy" class="splash-img" src="{{'cover.webp' | asset_siteimg}}"></img>
 		</div>
-	</div>
-</div>
+        <script defer src="/assets/js/signup.js?v=4000"></script>
 
-<script defer src="{{'js/signup.js' | asset}}"></script>
+        {% if hcaptcha %}
+	    <script defer src="/assets/js/hcaptcha.js?v=4000"></script>
+        {% endif %}
 
-{% if hcaptcha %}
-	<script defer src="{{'js/hcaptcha.js' | asset}}"></script>
-{% endif %}
-
-</body>
+    </body>
 
 </html>