diff --git a/files/classes/user.py b/files/classes/user.py
index 9fda61a7a5..090a17024b 100644
--- a/files/classes/user.py
+++ b/files/classes/user.py
@@ -450,6 +450,7 @@ class User(Base):
 	def json_popover(self, v):
 		data = {'username': self.username,
 				'url': self.url,
+				'id': self.id,
 				'profile_url': self.profile_url,
 				'bannerurl': self.banner_url,
 				'bio_html': self.bio_html_eager,
diff --git a/files/routes/settings.py b/files/routes/settings.py
index 44e9d45fd6..409315ac2b 100644
--- a/files/routes/settings.py
+++ b/files/routes/settings.py
@@ -100,7 +100,7 @@ def settings_profile_post(v):
 
 	elif request.values.get("compact", v.compact) != v.compact:
 		updated = True
-		v.teddit = request.values.get("compact", None) == 'true'
+		v.compact = request.values.get("compact", None) == 'true'
 
 	elif request.values.get("nitter", v.nitter) != v.nitter:
 		updated = True
diff --git a/files/static/dist/main.css b/files/static/dist/main.css
index 26da27cc44..b4375d2643 100644
--- a/files/static/dist/main.css
+++ b/files/static/dist/main.css
@@ -598,62 +598,62 @@ video {
 	--tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
 	--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-		/* Headings */
-		h1, .h1 {
+	/* Headings */
+	h1, .h1 {
 	margin-bottom: 0.5rem;
 	font-size: 3rem;
 	line-height: 1;
 	font-weight: 700;
 	line-height: 2.5rem;
 }
-		h2, .h2 {
+	h2, .h2 {
 	margin-bottom: 0.5rem;
 	font-size: 2.25rem;
 	line-height: 2.5rem;
 	font-weight: 700;
 	line-height: 2rem;
 }
-		h3, .h3 {
+	h3, .h3 {
 	margin-bottom: 0.5rem;
 	font-size: 1.875rem;
 	line-height: 2.25rem;
 	font-weight: 700;
 	line-height: 1.75rem;
 }
-		h4, .h4 {
+	h4, .h4 {
 	margin-bottom: 0.5rem;
 	font-size: 1.5rem;
 	line-height: 2rem;
 	font-weight: 700;
 	line-height: 1.5rem;
 }
-		h5, .h5 {
+	h5, .h5 {
 	margin-bottom: 0.5rem;
 	font-size: 1.125rem;
 	line-height: 1.75rem;
 	font-weight: 700;
 	line-height: 1.25rem;
 }
-		h6, .h6 {
+	h6, .h6 {
 	margin-bottom: 0.5rem;
 	font-size: 1rem;
 	line-height: 1.5rem;
 	font-weight: 700;
 	line-height: 1rem;
 }
-		/* Typography */
-		p {
+	/* Typography */
+	p {
 	margin-bottom: 0.75rem;
 }
-		p:last-child {
+	p:last-child {
 	margin-bottom: 0px;
 }
-		a {
+	a {
 	word-break: break-all;
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-primary), var(--tw-text-opacity));
 }
-		blockquote {
+	blockquote {
 	margin-bottom: 1rem;
 	border-left-width: 2px;
 	--tw-border-opacity: 1;
@@ -661,72 +661,72 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-100), var(--tw-bg-opacity));
 }
-		.dark blockquote {
+	.dark blockquote {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-500), var(--tw-border-opacity));
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-700), var(--tw-bg-opacity));
 }
-		hr {
+	hr {
 	margin-top: 0.75rem;
 	margin-bottom: 0.75rem;
 }
-		ul {
+	ul {
 	margin-bottom: 0.75rem;
 }
-		.comment-text > ul, .post-text > ul, .prose > ul {
+	.comment-text > ul, .post-text > ul, .prose > ul {
 	list-style-type: disc;
 	padding-left: 1.25rem;
 }
-		.comment-text > ol, .post-text > ol, .prose > ol {
+	.comment-text > ol, .post-text > ol, .prose > ol {
 	list-style-type: decimal;
 	padding-left: 1.25rem;
 }
-		strong {
+	strong {
 	font-weight: 700;
 }
-		code {
+	code {
 	font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
 	--tw-text-opacity: 1;
 	color: rgba(219, 39, 119, var(--tw-text-opacity));
 }
-		.dark code {
+	.dark code {
 	--tw-text-opacity: 1;
 	color: rgba(249, 168, 212, var(--tw-text-opacity));
 }
-		pre {
-			white-space: pre-wrap;       /* Since CSS 2.1 */
-			white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-			white-space: -pre-wrap;      /* Opera 4-6 */
-			white-space: -o-pre-wrap;    /* Opera 7 */
-			word-wrap: break-word;       /* Internet Explorer 5.5+ */
-		}
-		/* Images */
-		img {
+	pre {
+		white-space: pre-wrap;       /* Since CSS 2.1 */
+		white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+		white-space: -pre-wrap;      /* Opera 4-6 */
+		white-space: -o-pre-wrap;    /* Opera 7 */
+		word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	}
+	/* Images */
+	img {
 	display: inline;
 }
-		@-webkit-keyframes pulse {
+	@-webkit-keyframes pulse {
 
 	50% {
 		opacity: .5;
 	}
 }
-		@keyframes pulse {
+	@keyframes pulse {
 
 	50% {
 		opacity: .5;
 	}
 }
-		img[lazy=loading] {
+	img[lazy=loading] {
 	-webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-		img[width], img[height] {
-			max-width: none;
-			height: 24px;
-		}
-		/*Inputs*/
-		.label {
+	img[width], img[height] {
+		max-width: none;
+		height: 24px;
+	}
+	/*Inputs*/
+	.label {
 	margin-bottom: 0.25rem;
 	display: block;
 	font-size: 0.875rem;
@@ -736,7 +736,7 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-700), var(--tw-text-opacity));
 }
-		.dark .label {
+	.dark .label {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-500), var(--tw-text-opacity));
 }
@@ -807,6 +807,12 @@ video {
 	top: 0px;
 	bottom: 0px;
 }
+.top-2 {
+	top: 0.5rem;
+}
+.right-3 {
+	right: 0.75rem;
+}
 .top-0 {
 	top: 0px;
 }
@@ -822,9 +828,6 @@ video {
 .right-4 {
 	right: 1rem;
 }
-.top-2 {
-	top: 0.5rem;
-}
 .top-3 {
 	top: 0.75rem;
 }
@@ -840,9 +843,6 @@ video {
 .-top-1 {
 	top: -0.25rem;
 }
-.right-3 {
-	right: 0.75rem;
-}
 .-right-2\.5 {
 	right: -0.625rem;
 }
@@ -867,6 +867,9 @@ video {
 .top-3\.5 {
 	top: 0.875rem;
 }
+.bottom-4 {
+	bottom: 1rem;
+}
 .z-20 {
 	z-index: 20;
 }
@@ -1044,8 +1047,8 @@ video {
 .mb-auto {
 	margin-bottom: auto;
 }
-.-mt-12 {
-	margin-top: -3rem;
+.-mt-10 {
+	margin-top: -2.5rem;
 }
 .mr-2\.5 {
 	margin-right: 0.625rem;
@@ -1071,6 +1074,9 @@ video {
 .mt-2\.5 {
 	margin-top: 0.625rem;
 }
+.mb-0\.5 {
+	margin-bottom: 0.125rem;
+}
 .-mb-0\.5 {
 	margin-bottom: -0.125rem;
 }
@@ -1107,11 +1113,11 @@ video {
 .h-64 {
 	height: 16rem;
 }
-.h-32 {
-	height: 8rem;
+.h-28 {
+	height: 7rem;
 }
-.h-20 {
-	height: 5rem;
+.h-24 {
+	height: 6rem;
 }
 .h-12 {
 	height: 3rem;
@@ -1122,6 +1128,9 @@ video {
 .h-16 {
 	height: 4rem;
 }
+.h-20 {
+	height: 5rem;
+}
 .h-6 {
 	height: 1.5rem;
 }
@@ -1140,6 +1149,9 @@ video {
 .h-\[10px\] {
 	height: 10px;
 }
+.h-5 {
+	height: 1.25rem;
+}
 .h-8 {
 	height: 2rem;
 }
@@ -1167,9 +1179,6 @@ video {
 .h-2 {
 	height: 0.5rem;
 }
-.h-5 {
-	height: 1.25rem;
-}
 .h-7 {
 	height: 1.75rem;
 }
@@ -1182,14 +1191,17 @@ video {
 .min-h-full {
 	min-height: 100%;
 }
-.w-20 {
-	width: 5rem;
+.w-full {
+	width: 100%;
+}
+.w-24 {
+	width: 6rem;
 }
 .w-12 {
 	width: 3rem;
 }
-.w-full {
-	width: 100%;
+.w-20 {
+	width: 5rem;
 }
 .w-1\/2 {
 	width: 50%;
@@ -1233,6 +1245,9 @@ video {
 .w-\[14px\] {
 	width: 14px;
 }
+.w-5 {
+	width: 1.25rem;
+}
 .w-8 {
 	width: 2rem;
 }
@@ -1245,15 +1260,15 @@ video {
 .w-1\/4 {
 	width: 25%;
 }
-.w-5 {
-	width: 1.25rem;
-}
 .w-7 {
 	width: 1.75rem;
 }
 .w-44 {
 	width: 11rem;
 }
+.w-96 {
+	width: 24rem;
+}
 .min-w-full {
 	min-width: 100%;
 }
@@ -1375,12 +1390,12 @@ video {
 .gap-3 {
 	gap: 0.75rem;
 }
-.gap-6 {
-	gap: 1.5rem;
-}
 .gap-2 {
 	gap: 0.5rem;
 }
+.gap-6 {
+	gap: 1.5rem;
+}
 .gap-x-3 {
 	-moz-column-gap: 0.75rem;
 	     column-gap: 0.75rem;
@@ -1627,6 +1642,14 @@ video {
 	--tw-border-opacity: 1;
 	border-color: rgba(252, 165, 165, var(--tw-border-opacity));
 }
+.border-green-600 {
+	--tw-border-opacity: 1;
+	border-color: rgba(22, 163, 74, var(--tw-border-opacity));
+}
+.border-red-600 {
+	--tw-border-opacity: 1;
+	border-color: rgba(220, 38, 38, var(--tw-border-opacity));
+}
 .border-opacity-10 {
 	--tw-border-opacity: 0.1;
 }
@@ -2045,10 +2068,6 @@ video {
 	--tw-gradient-from: #d97706;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
 }
-.from-red-700 {
-	--tw-gradient-from: #b91c1c;
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0));
-}
 .to-gray-200 {
 	--tw-gradient-to: rgb(var(--color-200));
 }
@@ -2064,9 +2083,6 @@ video {
 .to-yellow-500 {
 	--tw-gradient-to: #f59e0b;
 }
-.to-red-600 {
-	--tw-gradient-to: #dc2626;
-}
 .bg-cover {
 	background-size: cover;
 }
@@ -2314,6 +2330,9 @@ video {
 .italic {
 	font-style: italic;
 }
+.leading-4 {
+	line-height: 1rem;
+}
 .leading-normal {
 	line-height: 1.5;
 }
@@ -2323,9 +2342,6 @@ video {
 .leading-5 {
 	line-height: 1.25rem;
 }
-.leading-4 {
-	line-height: 1rem;
-}
 .tracking-wider {
 	letter-spacing: 0.05em;
 }
@@ -2587,28 +2603,28 @@ video {
 	transition-duration: 150ms;
 }
 .text-shadow {
-			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
-		}
+		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
+	}
 .text-shadow-t {
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12)
-		}
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12)
+	}
 .text-shadow-light {
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
-		}
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
+	}
 .sub-header-shadow {
-			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset;
-		}
+		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset;
+	}
 .gradient-mask {
-			-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent)
-		}
+		-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent)
+	}
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
-			display: none;
-		}
+		display: none;
+	}
 .no-scrollbar {
-			-ms-overflow-style: none;  /* IE and Edge */
-			scrollbar-width: none;  /* Firefox */
-		}
+		-ms-overflow-style: none;  /* IE and Edge */
+		scrollbar-width: none;  /* Firefox */
+	}
 
 .theme-mountain-bluebird {
 	--color-primary: 0,132,180;
@@ -2858,7 +2874,7 @@ video {
 }
 
 .theme-evergreen {
-	--color-primary: 220, 38, 38;
+	--color-primary: 87,138,157;
 	--color-100: 244,246,244;
 	--color-200: 229,235,231;
 	--color-300: 209,219,213;
@@ -2883,17 +2899,12 @@ video {
 	--color-900: 40,31,17;
 }
 
-/* ----------------------- VARIABLES --------------------- */
-/*:root {
-	--color-primary: 220, 38, 38;
-	}*/
+/* ---------------- RESPONSIVE UTILITIES ----------------- */
 
-	/* ---------------- RESPONSIVE UTILITIES ----------------- */
+/* -------------------- BASE STYLING -------------------- */
 
-	/* -------------------- BASE STYLING -------------------- */
-
-	/* ----------------------- INPUTS ----------------------- */
-	.form-input {
+/* ----------------------- INPUTS ----------------------- */
+.form-input {
 	display: block;
 	width: 100%;
 	-webkit-appearance: none;
@@ -2911,11 +2922,11 @@ video {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-	.form-input:hover {
+.form-input:hover {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-400), var(--tw-border-opacity));
 }
-	.form-input:focus {
+.form-input:focus {
 	--tw-border-opacity: 1;
 	border-color: rgba(125, 211, 252, var(--tw-border-opacity));
 	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -2925,12 +2936,12 @@ video {
 	--tw-ring-color: rgba(186, 230, 253, var(--tw-ring-opacity));
 	--tw-ring-opacity: 0.5;
 }
-	.dark .form-input {
+.dark .form-input {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-900), var(--tw-border-opacity));
 	background-color: rgba(255, 255, 255, .06);
 }
-	@media (min-width: 640px) {
+@media (min-width: 640px) {
 
 	.form-input {
 		font-size: 1rem;
@@ -2938,8 +2949,8 @@ video {
 	}
 }
 
-	/* ---------------------- BUTTONS ----------------------- */
-	.btn {
+/* ---------------------- BUTTONS ----------------------- */
+.btn {
 	display: inline-block;
 	border-radius: 0.375rem;
 	border-width: 1px;
@@ -2952,20 +2963,20 @@ video {
 	font-weight: 700;
 	--tw-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset;
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
 }
-	.btn:focus {
+.btn:focus {
 	outline: 2px solid transparent;
 	outline-offset: 2px;
 }
-	.btn:active {
+.btn:active {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-	.btn:disabled {
+.btn:disabled {
 	opacity: 0.5;
 }
-	.btn-primary {
+.btn-primary {
 	border-color: rgba(0, 0, 0, 0.1);
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -2976,16 +2987,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-primary:hover {
+.btn-primary:hover {
 	--tw-gradient-from: rgba(var(--color-primary), 0.9);
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 	--tw-gradient-to: rgb(var(--color-primary));
 }
-	.btn-primary:focus {
+.btn-primary:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.btn-red {
+.btn-red {
 	--tw-border-opacity: 1;
 	border-color: rgba(127, 29, 29, var(--tw-border-opacity));
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -2995,16 +3006,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-red:hover {
+.btn-red:hover {
 	--tw-gradient-from: #dc2626;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0));
 	--tw-gradient-to: #b91c1c;
 }
-	.btn-red:focus {
+.btn-red:focus {
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-	.btn-green {
+.btn-green {
 	--tw-border-opacity: 1;
 	border-color: rgba(20, 83, 45, var(--tw-border-opacity));
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -3014,16 +3025,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-green:hover {
+.btn-green:hover {
 	--tw-gradient-from: #16a34a;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 163, 74, 0));
 	--tw-gradient-to: #15803d;
 }
-	.btn-green:focus {
+.btn-green:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.btn-blue {
+.btn-blue {
 	--tw-border-opacity: 1;
 	border-color: rgba(12, 74, 110, var(--tw-border-opacity));
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -3033,16 +3044,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-blue:hover {
+.btn-blue:hover {
 	--tw-gradient-from: #0284c7;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 132, 199, 0));
 	--tw-gradient-to: #0369a1;
 }
-	.btn-blue:focus {
+.btn-blue:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.btn-yellow {
+.btn-yellow {
 	--tw-border-opacity: 1;
 	border-color: rgba(120, 53, 15, var(--tw-border-opacity));
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -3052,16 +3063,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-yellow:hover {
+.btn-yellow:hover {
 	--tw-gradient-from: #d97706;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
 	--tw-gradient-to: #b45309;
 }
-	.btn-yellow:focus {
+.btn-yellow:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.btn-purple {
+.btn-purple {
 	--tw-border-opacity: 1;
 	border-color: rgba(88, 28, 135, var(--tw-border-opacity));
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -3071,16 +3082,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-purple:hover {
+.btn-purple:hover {
 	--tw-gradient-from: #9333ea;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0));
 	--tw-gradient-to: #7e22ce;
 }
-	.btn-purple:focus {
+.btn-purple:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.btn-pink {
+.btn-pink {
 	--tw-border-opacity: 1;
 	border-color: rgba(131, 24, 67, var(--tw-border-opacity));
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -3090,16 +3101,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-pink:hover {
+.btn-pink:hover {
 	--tw-gradient-from: #db2777;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 39, 119, 0));
 	--tw-gradient-to: #be185d;
 }
-	.btn-pink:focus {
+.btn-pink:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.btn-black {
+.btn-black {
 	border-color: rgba(0, 0, 0, 0.1);
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -3110,16 +3121,16 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-100), var(--tw-text-opacity));
 }
-	.btn-black:hover {
+.btn-black:hover {
 	--tw-gradient-from: rgba(0, 0, 0, 0.9);
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
 	--tw-gradient-to: #000;
 }
-	.btn-black:focus {
+.btn-black:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.btn-gray {
+.btn-gray {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-300), var(--tw-border-opacity));
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -3129,18 +3140,18 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-700), var(--tw-text-opacity));
 }
-	.btn-gray:hover {
+.btn-gray:hover {
 	--tw-gradient-from: rgb(var(--color-100));
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-100), 0));
 	--tw-gradient-to: rgb(var(--color-200));
 }
-	.btn-gray:focus {
+.btn-gray:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-900), var(--tw-text-opacity));
 }
 
-	/* ---------------------- DROPDOWNS --------------------- */
-	.dropdown-item-primary {
+/* ---------------------- DROPDOWNS --------------------- */
+.dropdown-item-primary {
 	display: block;
 	width: 100%;
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
@@ -3154,7 +3165,7 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-	.dropdown-item-primary:hover {
+.dropdown-item-primary:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 	--tw-gradient-from: rgb(var(--color-primary));
@@ -3163,37 +3174,37 @@ video {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-	.dropdown-item-primary:focus {
+.dropdown-item-primary:focus {
 	background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-	.dark .dropdown-item-primary {
+.dark .dropdown-item-primary {
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
-	.dark .dropdown-item-primary:hover {
+.dark .dropdown-item-primary:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 	--tw-gradient-from: rgba(var(--color-primary), 0.8);
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 	--tw-gradient-to: rgb(var(--color-primary));
 }
-	.dark .dropdown-item-primary:focus {
+.dark .dropdown-item-primary:focus {
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
 
-	/* ---------------------- NAV TABS ---------------------- */
-	.nav.nav-tabs .nav-link {
+/* ---------------------- NAV TABS ---------------------- */
+.nav.nav-tabs .nav-link {
 	border-bottom-width: 2px;
 	border-color: transparent;
 }
-	.nav.nav-tabs .nav-link.active {
+.nav.nav-tabs .nav-link.active {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-primary), var(--tw-border-opacity));
 }
 
-	/* ----------------------- BADGES ----------------------- */
-	.badge {
+/* ----------------------- BADGES ----------------------- */
+.badge {
 	border-radius: 0.25rem;
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 	padding-left: 0.25rem;
@@ -3204,57 +3215,57 @@ video {
 	line-height: 1.25rem;
 	font-weight: 700;
 	line-height: 1.5;
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
 }
-	.badge-pink {
+.badge-pink {
 	--tw-gradient-from: #db2777;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 39, 119, 0));
 	--tw-gradient-to: #ec4899;
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-	.badge-purple {
+.badge-purple {
 	--tw-gradient-from: #9333ea;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0));
 	--tw-gradient-to: #a855f7;
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-	.badge-red {
+.badge-red {
 	--tw-gradient-from: #dc2626;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0));
 	--tw-gradient-to: #ef4444;
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-	.badge-yellow {
+.badge-yellow {
 	--tw-gradient-from: #d97706;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
 	--tw-gradient-to: #f59e0b;
 	--tw-text-opacity: 1;
 	color: rgba(120, 53, 15, var(--tw-text-opacity));
 }
-	.badge-blue {
+.badge-blue {
 	--tw-gradient-from: #0284c7;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 132, 199, 0));
 	--tw-gradient-to: #0ea5e9;
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-	.badge-green {
+.badge-green {
 	--tw-gradient-from: #16a34a;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 163, 74, 0));
 	--tw-gradient-to: #22c55e;
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-	.badge-primary {
+.badge-primary {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-primary), var(--tw-bg-opacity));
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-	.patron {
+.patron {
 	border-radius: 0.25rem;
 	padding-left: 0.25rem;
 	padding-right: 0.25rem;
@@ -3264,484 +3275,615 @@ video {
 	line-height: 1.25rem;
 	font-weight: 700;
 	line-height: 1.5;
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
-	/* ---------------------- TOOLTIPS ---------------------- */
-	.tooltip-inner {
-		background-color: @apply text-black;
-		color: @apply text-white;
-	}
-
-	/* ----------------------- EMOJI ------------------------ */
-	img.emoji {
-		width: 30px;
-		height: 30px;
-		display: inline-block;
-		-o-object-fit: contain;
-		   object-fit: contain}
-
-	img.emoji-md {
-		width: 60px;
-		height: 60px;
-		display: inline-block;
-		-o-object-fit: contain;
-		   object-fit: contain}
-
-	img.emoji-lg {
-		max-width: 100%;
-		display: inline-block;
-		-o-object-fit: contain;
-		   object-fit: contain}
-
-.agendaposter {
-	text-transform: uppercase !important;
+/* ---------------------- TOOLTIPS ---------------------- */
+.tooltip-inner {
+	background-color: @apply text-black;
+	color: @apply text-white;
 }
-code {
-    text-transform: none !important;
+
+/* ---------------------- POPOVER ----------------------- */
+.popover {
+	width: 24rem;
+	overflow: hidden;
+	border-radius: 0.375rem;
+	border-style: none;
+	--tw-bg-opacity: 1;
+	background-color: rgba(var(--color-100), var(--tw-bg-opacity));
+	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.dark .popover {
+	--tw-bg-opacity: 1;
+	background-color: rgba(var(--color-900), var(--tw-bg-opacity));
+}
+
+/* ----------------------- EMOJI ------------------------ */
+img.emoji {
+	width: 30px;
+	height: 30px;
+	display: inline-block;
+	-o-object-fit: contain;
+	   object-fit: contain}
+
+img.emoji-md {
+	width: 60px;
+	height: 60px;
+	display: inline-block;
+	-o-object-fit: contain;
+	   object-fit: contain}
+
+img.emoji-lg {
+	max-width: 100%;
+	display: inline-block;
+	-o-object-fit: contain;
+	   object-fit: contain}
+
 .first\:pt-0:first-child {
 	padding-top: 0px;
 }
+
 .odd\:bg-gray-300:nth-child(odd) {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-300), var(--tw-bg-opacity));
 }
+
 .odd\:bg-gray-200:nth-child(odd) {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-200), var(--tw-bg-opacity));
 }
+
 .visited\:text-gray-700:visited {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-700), var(--tw-text-opacity));
 }
+
 .hover\:scale-\[1\.15\]:hover {
 	--tw-scale-x: 1.15;
 	--tw-scale-y: 1.15;
 	transform: var(--tw-transform);
 }
+
 .hover\:cursor-pointer:hover {
 	cursor: pointer;
 }
+
 .hover\:border-gray-400:hover {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-400), var(--tw-border-opacity));
 }
+
 .hover\:border-gray-500:hover {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-500), var(--tw-border-opacity));
 }
+
 .hover\:bg-gray-400:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-400), var(--tw-bg-opacity));
 }
+
 .hover\:bg-gray-300:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-300), var(--tw-bg-opacity));
 }
+
 .hover\:bg-gray-700:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-700), var(--tw-bg-opacity));
 }
+
 .hover\:bg-black\/30:hover {
 	background-color: rgba(0, 0, 0, 0.3);
 }
+
 .hover\:bg-gray-100:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-100), var(--tw-bg-opacity));
 }
+
 .hover\:bg-primary\/80:hover {
 	background-color: rgba(var(--color-primary), 0.8);
 }
+
 .hover\:bg-gradient-to-t:hover {
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
+
 .hover\:from-gray-100:hover {
 	--tw-gradient-from: rgb(var(--color-100));
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-100), 0));
 }
+
 .hover\:from-green-600:hover {
 	--tw-gradient-from: #16a34a;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 163, 74, 0));
 }
+
 .hover\:from-yellow-500:hover {
 	--tw-gradient-from: #f59e0b;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
 }
+
 .hover\:from-red-800:hover {
 	--tw-gradient-from: #991b1b;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(153, 27, 27, 0));
 }
+
 .hover\:from-yellow-600:hover {
 	--tw-gradient-from: #d97706;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
 }
-.hover\:from-red-600:hover {
-	--tw-gradient-from: #dc2626;
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0));
-}
+
 .hover\:from-green-800:hover {
 	--tw-gradient-from: #166534;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 101, 52, 0));
 }
+
 .hover\:to-gray-200:hover {
 	--tw-gradient-to: rgb(var(--color-200));
 }
+
 .hover\:to-green-700:hover {
 	--tw-gradient-to: #15803d;
 }
+
 .hover\:to-yellow-600:hover {
 	--tw-gradient-to: #d97706;
 }
+
 .hover\:to-red-700:hover {
 	--tw-gradient-to: #b91c1c;
 }
+
 .hover\:to-yellow-500:hover {
 	--tw-gradient-to: #f59e0b;
 }
+
 .hover\:text-primary:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-primary), var(--tw-text-opacity));
 }
+
 .hover\:text-gray-700:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-700), var(--tw-text-opacity));
 }
+
 .hover\:text-gray-900:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-900), var(--tw-text-opacity));
 }
+
 .hover\:text-gray-400:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-400), var(--tw-text-opacity));
 }
+
 .hover\:text-gray-300:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-300), var(--tw-text-opacity));
 }
+
 .hover\:text-gray-200:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
+
 .hover\:text-white:hover {
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+
 .hover\:text-yellow-400:hover {
 	--tw-text-opacity: 1;
 	color: rgba(251, 191, 36, var(--tw-text-opacity));
 }
+
 .hover\:text-green-700:hover {
 	--tw-text-opacity: 1;
 	color: rgba(21, 128, 61, var(--tw-text-opacity));
 }
+
 .hover\:text-gray-500:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-500), var(--tw-text-opacity));
 }
+
 .hover\:text-gray-600:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-600), var(--tw-text-opacity));
 }
+
 .hover\:text-blue-600:hover {
 	--tw-text-opacity: 1;
 	color: rgba(2, 132, 199, var(--tw-text-opacity));
 }
+
 .hover\:text-red-700:hover {
 	--tw-text-opacity: 1;
 	color: rgba(185, 28, 28, var(--tw-text-opacity));
 }
+
 .hover\:text-yellow-900:hover {
 	--tw-text-opacity: 1;
 	color: rgba(120, 53, 15, var(--tw-text-opacity));
 }
+
 .hover\:text-gray-800:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-800), var(--tw-text-opacity));
 }
+
 .hover\:underline:hover {
 	text-decoration: underline;
 }
+
 .hover\:opacity-100:hover {
 	opacity: 1;
 }
+
 .hover\:shadow-inner:hover {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .focus\:border-blue-300:focus {
 	--tw-border-opacity: 1;
 	border-color: rgba(125, 211, 252, var(--tw-border-opacity));
 }
+
 .focus\:bg-white:focus {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
+
 .focus\:bg-gradient-to-t:focus {
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
+
 .focus\:from-gray-100:focus {
 	--tw-gradient-from: rgb(var(--color-100));
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-100), 0));
 }
+
 .focus\:from-red-800:focus {
 	--tw-gradient-from: #991b1b;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(153, 27, 27, 0));
 }
+
 .focus\:from-yellow-600:focus {
 	--tw-gradient-from: #d97706;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
 }
+
 .focus\:from-green-800:focus {
 	--tw-gradient-from: #166534;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 101, 52, 0));
 }
+
 .focus\:to-gray-200:focus {
 	--tw-gradient-to: rgb(var(--color-200));
 }
+
 .focus\:to-red-700:focus {
 	--tw-gradient-to: #b91c1c;
 }
+
 .focus\:to-yellow-500:focus {
 	--tw-gradient-to: #f59e0b;
 }
+
 .focus\:to-green-700:focus {
 	--tw-gradient-to: #15803d;
 }
+
 .focus\:font-bold:focus {
 	font-weight: 700;
 }
+
 .focus\:text-black:focus {
 	--tw-text-opacity: 1;
 	color: rgba(0, 0, 0, var(--tw-text-opacity));
 }
+
 .focus\:text-gray-900:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-900), var(--tw-text-opacity));
 }
+
 .focus\:text-gray-500:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-500), var(--tw-text-opacity));
 }
+
 .focus\:text-yellow-500:focus {
 	--tw-text-opacity: 1;
 	color: rgba(245, 158, 11, var(--tw-text-opacity));
 }
+
 .focus\:text-gray-300:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-300), var(--tw-text-opacity));
 }
+
 .focus\:text-gray-200:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
-.focus\:text-gray-400:focus {
-	--tw-text-opacity: 1;
-	color: rgba(var(--color-400), var(--tw-text-opacity));
-}
+
 .focus\:shadow-inner:focus {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .focus\:outline-none:focus {
 	outline: 2px solid transparent;
 	outline-offset: 2px;
 }
+
 .focus\:ring-2:focus {
 	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
 	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .focus\:ring:focus {
 	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
 	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .focus\:ring-inset:focus {
 	--tw-ring-inset: inset;
 }
+
 .focus\:ring-white:focus {
 	--tw-ring-opacity: 1;
 	--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
 }
+
 .focus\:ring-blue-200:focus {
 	--tw-ring-opacity: 1;
 	--tw-ring-color: rgba(186, 230, 253, var(--tw-ring-opacity));
 }
+
 .focus\:ring-opacity-50:focus {
 	--tw-ring-opacity: 0.5;
 }
+
 .focus\:ring-offset-2:focus {
 	--tw-ring-offset-width: 2px;
 }
+
 .focus\:ring-offset-gray-800:focus {
 	--tw-ring-offset-color: rgb(var(--color-800));
 }
+
 .focus\:text-shadow:focus {
-			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
-		}
+		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
+	}
+
 .active\:text-gray-800:active {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-800), var(--tw-text-opacity));
 }
+
 .active\:shadow-inner:active {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .active\:outline-none:active {
 	outline: 2px solid transparent;
 	outline-offset: 2px;
 }
+
+.group:hover .group-hover\:z-20 {
+	z-index: 20;
+}
+
 .group:hover .group-hover\:block {
 	display: block;
 }
+
 @keyframes pulse {
 
 	50% {
 		opacity: .5;
 	}
 }
+
 .group:hover .group-hover\:animate-pulse {
 	-webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+
 .group:hover .group-hover\:text-primary {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-primary), var(--tw-text-opacity));
 }
+
 .peer:checked ~ .peer-checked\:border-blue-500 {
 	--tw-border-opacity: 1;
 	border-color: rgba(14, 165, 233, var(--tw-border-opacity));
 }
+
 .peer:checked ~ .peer-checked\:bg-gray-400 {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-400), var(--tw-bg-opacity));
 }
+
 .peer:checked ~ .peer-checked\:bg-blue-600\/10 {
 	background-color: rgba(2, 132, 199, 0.1);
 }
+
 .peer:checked ~ .peer-checked\:shadow-inner {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
 	--tw-divide-opacity: 1;
 	border-color: rgba(var(--color-700), var(--tw-divide-opacity));
 }
+
 .dark .dark\:border-b {
 	border-bottom-width: 1px;
 }
+
 .dark .dark\:border-gray-900 {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-900), var(--tw-border-opacity));
 }
-.dark .dark\:border-gray-700 {
-	--tw-border-opacity: 1;
-	border-color: rgba(var(--color-700), var(--tw-border-opacity));
-}
+
 .dark .dark\:border-gray-800 {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-800), var(--tw-border-opacity));
 }
+
+.dark .dark\:border-gray-700 {
+	--tw-border-opacity: 1;
+	border-color: rgba(var(--color-700), var(--tw-border-opacity));
+}
+
 .dark .dark\:border-gray-600 {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-600), var(--tw-border-opacity));
 }
+
 .dark .dark\:border-transparent {
 	border-color: transparent;
 }
+
 .dark .dark\:border-white\/\[\.05\] {
 	border-color: rgba(255, 255, 255, .05);
 }
+
 .dark .dark\:bg-gray-700 {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-700), var(--tw-bg-opacity));
 }
+
 .dark .dark\:bg-gray-900 {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-900), var(--tw-bg-opacity));
 }
+
 .dark .dark\:bg-gray-800 {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-800), var(--tw-bg-opacity));
 }
+
 .dark .dark\:bg-white\/\[\.05\] {
 	background-color: rgba(255, 255, 255, .05);
 }
+
 .dark .dark\:bg-white\/10 {
 	background-color: rgba(255, 255, 255, 0.1);
 }
+
+.dark .dark\:bg-gray-700\/90 {
+	background-color: rgba(var(--color-700), 0.9);
+}
+
 .dark .dark\:bg-gray-700\/40 {
 	background-color: rgba(var(--color-700), 0.4);
 }
+
 .dark .dark\:bg-none {
 	background-image: none;
 }
-.dark .dark\:text-gray-100 {
-	--tw-text-opacity: 1;
-	color: rgba(var(--color-100), var(--tw-text-opacity));
-}
+
 .dark .dark\:text-gray-400 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-400), var(--tw-text-opacity));
 }
+
 .dark .dark\:text-gray-500 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-500), var(--tw-text-opacity));
 }
+
 .dark .dark\:text-gray-200 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
+
 .dark .dark\:text-green-400 {
 	--tw-text-opacity: 1;
 	color: rgba(74, 222, 128, var(--tw-text-opacity));
 }
+
+.dark .dark\:text-gray-100 {
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-100), var(--tw-text-opacity));
+}
+
 .dark .dark\:text-gray-300 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-300), var(--tw-text-opacity));
 }
+
 .dark .dark\:text-gray-700 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-700), var(--tw-text-opacity));
 }
+
 .dark .dark\:odd\:bg-white\/\[\.05\]:nth-child(odd) {
 	background-color: rgba(255, 255, 255, .05);
 }
+
 .dark .dark\:visited\:text-gray-400:visited {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-400), var(--tw-text-opacity));
 }
+
 .dark .dark\:hover\:bg-white\/10:hover {
 	background-color: rgba(255, 255, 255, 0.1);
 }
+
 .dark .dark\:hover\:bg-gray-700:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-700), var(--tw-bg-opacity));
 }
+
 .dark .dark\:hover\:bg-gray-600:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-600), var(--tw-bg-opacity));
 }
+
 .dark .dark\:hover\:text-gray-400:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-400), var(--tw-text-opacity));
 }
+
 .dark .dark\:hover\:text-gray-200:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
 }
+
 .dark .dark\:hover\:text-primary:hover {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-primary), var(--tw-text-opacity));
 }
+
 .dark .dark\:focus\:bg-transparent:focus {
 	background-color: transparent;
 }
+
 .dark .dark\:focus\:text-gray-400:focus {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-400), var(--tw-text-opacity));
 }
+
+.dark .group:hover .dark\:group-hover\:text-primary {
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-primary), var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
 
 	.sm\:static {
@@ -3825,6 +3967,7 @@ code {
 		line-height: 1.75rem;
 	}
 }
+
 @media (min-width: 768px) {
 
 	.md\:col-span-1 {
@@ -3900,6 +4043,10 @@ code {
 		height: 5rem;
 	}
 
+	.md\:h-16 {
+		height: 4rem;
+	}
+
 	.md\:h-12 {
 		height: 3rem;
 	}
@@ -3924,6 +4071,10 @@ code {
 		width: 16rem;
 	}
 
+	.md\:w-24 {
+		width: 6rem;
+	}
+
 	.md\:w-1\/2 {
 		width: 50%;
 	}
@@ -4062,6 +4213,21 @@ code {
 		padding-right: 1rem;
 	}
 
+	.md\:py-1 {
+		padding-top: 0.25rem;
+		padding-bottom: 0.25rem;
+	}
+
+	.md\:px-2\.5 {
+		padding-left: 0.625rem;
+		padding-right: 0.625rem;
+	}
+
+	.md\:px-2 {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
+
 	.md\:px-5 {
 		padding-left: 1.25rem;
 		padding-right: 1.25rem;
@@ -4148,6 +4314,7 @@ code {
 		background-color: transparent;
 	}
 }
+
 @media (min-width: 1024px) {
 
 	.lg\:block {
@@ -4187,6 +4354,7 @@ code {
 		padding-right: 2rem;
 	}
 }
+
 @media (min-width: 1280px) {
 
 	.xl\:col-span-9 {
@@ -4216,4 +4384,5 @@ code {
 	.xl\:w-1\/5 {
 		width: 20%;
 	}
-}
\ No newline at end of file
+}
+
diff --git a/files/static/src/main.css b/files/static/src/main.css
index bf395016dc..7618a4e7f0 100644
--- a/files/static/src/main.css
+++ b/files/static/src/main.css
@@ -250,7 +250,7 @@
 }
 
 .theme-evergreen {
-	--color-primary: 220, 38, 38;
+	--color-primary: 87,138,157;
 	--color-100: 244,246,244;
 	--color-200: 229,235,231;
 	--color-300: 209,219,213;
@@ -275,220 +275,214 @@
 	--color-900: 40,31,17;
 }
 
-/* ----------------------- VARIABLES --------------------- */
-/*:root {
-	--color-primary: 220, 38, 38;
-	}*/
-
-	/* ---------------- RESPONSIVE UTILITIES ----------------- */
-	@responsive {
-		.text-shadow {
-			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
-		}
-		.text-shadow-t {
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12)
-		}
-		.text-shadow-light {
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
-		}
-		.text-shadow-light-t {
-			text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1)
-		}
-		.sub-header-shadow {
-			box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset;
-		}
-		.gradient-mask {
-			-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent)
-		}
-		/* Chrome, Safari and Opera */
-		.no-scrollbar::-webkit-scrollbar {
-			display: none;
-		}
-		.no-scrollbar {
-			-ms-overflow-style: none;  /* IE and Edge */
-			scrollbar-width: none;  /* Firefox */
-		}
+/* ---------------- RESPONSIVE UTILITIES ----------------- */
+@responsive {
+	.text-shadow {
+		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12)
 	}
-
-	/* -------------------- BASE STYLING -------------------- */
-	@layer base {
-		/* Headings */
-		h1, .h1 {
-			@apply text-5xl font-bold leading-10 mb-2;
-		}
-		h2, .h2 {
-			@apply text-4xl font-bold leading-8 mb-2;
-		}
-		h3, .h3 {
-			@apply text-3xl font-bold leading-7 mb-2;
-		}
-		h4, .h4 {
-			@apply text-2xl font-bold leading-6 mb-2;
-		}
-		h5, .h5 {
-			@apply text-lg font-bold leading-5 mb-2;
-		}
-		h6, .h6 {
-			@apply text-base font-bold leading-4 mb-2;
-		}
-		/* Typography */
-		p {
-			@apply mb-3 last:mb-0;
-		}
-		a {
-			@apply text-primary break-all
-		}
-		blockquote {
-			@apply bg-gray-100 dark:bg-gray-700 border-l-2 border-gray-700 dark:border-gray-500 mb-4;
-		}
-		hr {
-			@apply my-3
-		}
-		ul {
-			@apply mb-3
-		}
-		.comment-text > ul, .post-text > ul, .prose > ul {
-			@apply list-disc pl-5
-		}
-		.comment-text > ol, .post-text > ol, .prose > ol {
-			@apply list-decimal pl-5
-		}
-		strong {
-			@apply font-bold
-		}
-		code {
-			@apply text-pink-600 dark:text-pink-300 font-mono;
-		}
-		pre {
-			white-space: pre-wrap;       /* Since CSS 2.1 */
-			white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-			white-space: -pre-wrap;      /* Opera 4-6 */
-			white-space: -o-pre-wrap;    /* Opera 7 */
-			word-wrap: break-word;       /* Internet Explorer 5.5+ */
-		}
-		/* Images */
-		img {
-			@apply inline
-		}
-		img[lazy=loading] {
-			@apply animate-pulse;
-		}
-		img[width], img[height] {
-			max-width: none;
-			height: 24px;
-		}
-		/*Inputs*/
-		.label {
-			@apply block font-bold text-gray-700 dark:text-gray-500 text-sm leading-normal mb-1;
-		}
+	.text-shadow-t {
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12)
 	}
-
-	/* ----------------------- INPUTS ----------------------- */
-	.form-input {
-		@apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white dark:bg-white/[.06] border border-gray-300 hover:border-gray-400 dark:border-gray-900 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;
+	.text-shadow-light {
+		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)
 	}
-
-	/* ---------------------- BUTTONS ----------------------- */
-	.btn {
-		@apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50;
+	.text-shadow-light-t {
+		text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1)
 	}
-	.btn-primary {
-		@apply bg-white bg-gradient-to-t from-primary to-primary/80 hover:from-primary/90 hover:to-primary border-black/10 text-gray-100 focus:text-gray-200;
+	.sub-header-shadow {
+		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0.5px rgba(17, 40, 19, 0.1) inset;
 	}
-	.btn-red {
-		@apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white;
+	.gradient-mask {
+		-webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); mask-image: linear-gradient(180deg,#000 60%,transparent)
 	}
-	.btn-green {
-		@apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200;
+	/* Chrome, Safari and Opera */
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
 	}
-	.btn-blue {
-		@apply bg-gradient-to-t from-blue-700 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-blue-900 text-gray-100 focus:text-gray-200;
+	.no-scrollbar {
+		-ms-overflow-style: none;  /* IE and Edge */
+		scrollbar-width: none;  /* Firefox */
 	}
-	.btn-yellow {
-		@apply bg-gradient-to-t from-yellow-700 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 border-yellow-900 text-gray-100 focus:text-gray-200;
-	}
-	.btn-purple {
-		@apply bg-gradient-to-t from-purple-700 to-purple-600 hover:from-purple-600 hover:to-purple-700 border-purple-900 text-gray-100 focus:text-gray-200;
-	}
-	.btn-pink {
-		@apply bg-gradient-to-t from-pink-700 to-pink-600 hover:from-pink-600 hover:to-pink-700 border-pink-900 text-gray-100 focus:text-gray-200;
-	}
-	.btn-black {
-		@apply bg-white bg-gradient-to-t from-black to-black/80 hover:from-black/90 hover:to-black border-black/10 text-gray-100 focus:text-gray-200;
-	}
-	.btn-gray {
-		@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
-	}
-
-	/* ---------------------- DROPDOWNS --------------------- */
-	.dropdown-item-primary {
-		@apply block w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-white dark:hover:bg-black bg-gradient-to-t dark:bg-gradient-to-t hover:from-primary hover:to-primary/80 dark:hover:from-primary/80 dark:hover:to-primary hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-b dark:focus:bg-gradient-to-t;
-	}
-
-	/* ---------------------- NAV TABS ---------------------- */
-	.nav.nav-tabs .nav-link {
-		@apply border-b-2 border-transparent
-	}
-	.nav.nav-tabs .nav-link.active {
-		@apply border-primary
-	}
-
-	/* ----------------------- BADGES ----------------------- */
-	.badge {
-		@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t;
-	}
-	.badge-pink {
-		@apply from-pink-600 to-pink-500 text-white;
-	}
-	.badge-purple {
-		@apply from-purple-600 to-purple-500 text-white;
-	}
-	.badge-red {
-		@apply from-red-600 to-red-500 text-white;
-	}
-	.badge-yellow {
-		@apply from-yellow-600 to-yellow-500 text-yellow-900;
-	}
-	.badge-blue {
-		@apply from-blue-600 to-blue-500 text-white;
-	}
-	.badge-green {
-		@apply from-green-600 to-green-500 text-white;
-	}
-	.badge-primary {
-		@apply bg-primary text-white;
-	}
-	.patron {
-		@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded;
-	}
-
-	/* ---------------------- TOOLTIPS ---------------------- */
-	.tooltip-inner {
-		background-color: @apply text-black;
-		color: @apply text-white;
-	}
-
-	/* ----------------------- EMOJI ------------------------ */
-	img.emoji {
-		width: 30px;
-		height: 30px;
-		@apply inline-block object-contain
-	}
-
-	img.emoji-md {
-		width: 60px;
-		height: 60px;
-		@apply inline-block object-contain
-	}
-
-	img.emoji-lg {
-		max-width: 100%;
-		@apply inline-block object-contain
-	}
-
-.agendaposter {
-	text-transform: uppercase !important;
 }
-code {
-    text-transform: none !important;
-}
\ No newline at end of file
+
+/* -------------------- BASE STYLING -------------------- */
+@layer base {
+	/* Headings */
+	h1, .h1 {
+		@apply text-5xl font-bold leading-10 mb-2;
+	}
+	h2, .h2 {
+		@apply text-4xl font-bold leading-8 mb-2;
+	}
+	h3, .h3 {
+		@apply text-3xl font-bold leading-7 mb-2;
+	}
+	h4, .h4 {
+		@apply text-2xl font-bold leading-6 mb-2;
+	}
+	h5, .h5 {
+		@apply text-lg font-bold leading-5 mb-2;
+	}
+	h6, .h6 {
+		@apply text-base font-bold leading-4 mb-2;
+	}
+	/* Typography */
+	p {
+		@apply mb-3 last:mb-0;
+	}
+	a {
+		@apply text-primary break-all
+	}
+	blockquote {
+		@apply bg-gray-100 dark:bg-gray-700 border-l-2 border-gray-700 dark:border-gray-500 mb-4;
+	}
+	hr {
+		@apply my-3
+	}
+	ul {
+		@apply mb-3
+	}
+	.comment-text > ul, .post-text > ul, .prose > ul {
+		@apply list-disc pl-5
+	}
+	.comment-text > ol, .post-text > ol, .prose > ol {
+		@apply list-decimal pl-5
+	}
+	strong {
+		@apply font-bold
+	}
+	code {
+		@apply text-pink-600 dark:text-pink-300 font-mono;
+	}
+	pre {
+		white-space: pre-wrap;       /* Since CSS 2.1 */
+		white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+		white-space: -pre-wrap;      /* Opera 4-6 */
+		white-space: -o-pre-wrap;    /* Opera 7 */
+		word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	}
+	/* Images */
+	img {
+		@apply inline
+	}
+	img[lazy=loading] {
+		@apply animate-pulse;
+	}
+	img[width], img[height] {
+		max-width: none;
+		height: 24px;
+	}
+	/*Inputs*/
+	.label {
+		@apply block font-bold text-gray-700 dark:text-gray-500 text-sm leading-normal mb-1;
+	}
+}
+
+/* ----------------------- INPUTS ----------------------- */
+.form-input {
+	@apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white dark:bg-white/[.06] border border-gray-300 hover:border-gray-400 dark:border-gray-900 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;
+}
+
+/* ---------------------- BUTTONS ----------------------- */
+.btn {
+	@apply inline-block px-4 py-2 active:shadow-inner border rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold focus:outline-none disabled:opacity-50;
+}
+.btn-primary {
+	@apply bg-white bg-gradient-to-t from-primary to-primary/80 hover:from-primary/90 hover:to-primary border-black/10 text-gray-100 focus:text-gray-200;
+}
+.btn-red {
+	@apply bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 border-red-900 text-gray-100 focus:text-white;
+}
+.btn-green {
+	@apply bg-gradient-to-t from-green-700 to-green-600 hover:from-green-600 hover:to-green-700 border-green-900 text-gray-100 focus:text-gray-200;
+}
+.btn-blue {
+	@apply bg-gradient-to-t from-blue-700 to-blue-600 hover:from-blue-600 hover:to-blue-700 border-blue-900 text-gray-100 focus:text-gray-200;
+}
+.btn-yellow {
+	@apply bg-gradient-to-t from-yellow-700 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 border-yellow-900 text-gray-100 focus:text-gray-200;
+}
+.btn-purple {
+	@apply bg-gradient-to-t from-purple-700 to-purple-600 hover:from-purple-600 hover:to-purple-700 border-purple-900 text-gray-100 focus:text-gray-200;
+}
+.btn-pink {
+	@apply bg-gradient-to-t from-pink-700 to-pink-600 hover:from-pink-600 hover:to-pink-700 border-pink-900 text-gray-100 focus:text-gray-200;
+}
+.btn-black {
+	@apply bg-white bg-gradient-to-t from-black to-black/80 hover:from-black/90 hover:to-black border-black/10 text-gray-100 focus:text-gray-200;
+}
+.btn-gray {
+	@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
+}
+
+/* ---------------------- DROPDOWNS --------------------- */
+.dropdown-item-primary {
+	@apply block w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-white dark:hover:bg-black bg-gradient-to-t dark:bg-gradient-to-t hover:from-primary hover:to-primary/80 dark:hover:from-primary/80 dark:hover:to-primary hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-b dark:focus:bg-gradient-to-t;
+}
+
+/* ---------------------- NAV TABS ---------------------- */
+.nav.nav-tabs .nav-link {
+	@apply border-b-2 border-transparent
+}
+.nav.nav-tabs .nav-link.active {
+	@apply border-primary
+}
+
+/* ----------------------- BADGES ----------------------- */
+.badge {
+	@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t;
+}
+.badge-pink {
+	@apply from-pink-600 to-pink-500 text-white;
+}
+.badge-purple {
+	@apply from-purple-600 to-purple-500 text-white;
+}
+.badge-red {
+	@apply from-red-600 to-red-500 text-white;
+}
+.badge-yellow {
+	@apply from-yellow-600 to-yellow-500 text-yellow-900;
+}
+.badge-blue {
+	@apply from-blue-600 to-blue-500 text-white;
+}
+.badge-green {
+	@apply from-green-600 to-green-500 text-white;
+}
+.badge-primary {
+	@apply bg-primary text-white;
+}
+.patron {
+	@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded;
+}
+
+/* ---------------------- TOOLTIPS ---------------------- */
+.tooltip-inner {
+	background-color: @apply text-black;
+	color: @apply text-white;
+}
+
+/* ---------------------- POPOVER ----------------------- */
+.popover {
+	@apply rounded-md w-96 shadow-lg overflow-hidden border-none bg-gray-100 dark:bg-gray-900;
+}
+
+/* ----------------------- EMOJI ------------------------ */
+img.emoji {
+	width: 30px;
+	height: 30px;
+	@apply inline-block object-contain
+}
+
+img.emoji-md {
+	width: 60px;
+	height: 60px;
+	@apply inline-block object-contain
+}
+
+img.emoji-lg {
+	max-width: 100%;
+	@apply inline-block object-contain
+}
+
diff --git a/files/templates/CHRISTMAS/ProfilePopover.html b/files/templates/CHRISTMAS/ProfilePopover.html
index 8c89317a06..7b44c2e808 100644
--- a/files/templates/CHRISTMAS/ProfilePopover.html
+++ b/files/templates/CHRISTMAS/ProfilePopover.html
@@ -1,36 +1,55 @@
 <div style="display:none" id="popover">
-	<div class="popover-user-profile dark:bg-gray-700 text-black dark:text-gray-100" role="tooltip">
-		<img loading="lazy" class="pop-banner w-100 h-32 object-cover">
-		<div class="flex items-end px-3 -mt-12 mb-3">
-			<img loading="lazy" class="pop-picture h-20 w-20 rounded-sm p-[3px] bg-white dark:bg-gray-900 shadow-sm">
-			<div class="px-3 truncate">
-			<h5 class="pop-username truncate ellipsis"></h5>
+	<div class="relative popover-user-profile bg-gray-100 dark:bg-gray-900" role="tooltip">
+		<img loading="lazy" class="pop-banner w-full h-28 object-cover">
+		<div class="flex items-end px-4 -mt-10">
+			<img loading="lazy" class="pop-picture h-24 w-24 rounded-sm p-[3px] bg-white dark:bg-gray-900 shadow-sm">
+			<div class="pl-3 truncate mb-1">
+				<h5 class="pop-username truncate ellipsis"></h5>
+				<div class="text-sm text-gray-500 flex items-center leading-4">
+					<span>
+						#<span class="pop-uid"></span>
+					</span>
+					<strong class="mx-1">&#183;</strong>
+					<span>
+						<span class="pop-coins"></span>
+						coins
+					</span>
+				</div>
 			</div>
 		</div>
-		<div class="px-3">
+		<div class="hidden px-4">
 			<span class="pop-bio popover-bio"></span>
 		</div>
 
-		<div class="pop-badges ml-3 mr-3 my-2">
+		<div class="pop-badges p-4">
 		</div>
 
-	  <div class="border-t flex items-center p-3 gap-3 text-sm">
-		<span>
-		  <strong class="pop-postcount"></strong>
-		  <span class="text-gray-500">posts</span>
-		</span>
-		<span class="ml-3">
-		  <strong class="pop-commentcount"></strong>
-		  <span class="text-gray-500">comments</span>
-		</span>
-		<span class="ml-3">
-			<strong class="pop-coins"></strong>
-			<span class="text-gray-500">coins</span>
-		</span>  
-		<a target="_blank" class="pop-viewmore ml-auto text-decoration-none">
-		  View
-		  <i class="fas fa-arrow-right fa-sm fa-fw px-1"></i>
-		</a>
-	  </div>
+		<div class="border-t border-gray-300 dark:border-gray-800 flex items-center p-4 gap-2 text-sm">
+			<span>
+				<strong class="pop-postcount"></strong>
+				<span class="text-gray-500">posts</span>
+			</span>
+			<span>
+				<strong class="pop-commentcount"></strong>
+				<span class="text-gray-500">comments</span>
+			</span>
+			<a target="_blank" class="pop-viewmore ml-auto text-decoration-none">
+				View
+				<i class="fas fa-arrow-alt-right fa-sm fa-fw px-1"></i>
+			</a>
+		</div>
+
+		{% if v %}
+		<!-- Actionable buttons -->
+		<div class="flex items-center space-x-2 absolute top-2 right-3" id="popoverWrapper">
+			<!-- <a href="#" class="btn btn-gray" data-bs-toggle="modal" data-bs-target="#giftCoinsModal">
+				<i class="fas fa-gift fa-fw fa-sm"></i>
+			</a> -->
+			<button class="btn btn-gray pop-dm-button" data-bs-toggle="modal" data-bs-target="#directMessageModal">
+				<i class="fas fa-paper-plane fa-fw fa-sm mr-2"></i>
+				Message
+			</button>
+		</div>
+		{% endif %}
 	</div>
 </div>
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/admin/admin_home.html b/files/templates/CHRISTMAS/admin/admin_home.html
index 75b685001f..989b18496e 100644
--- a/files/templates/CHRISTMAS/admin/admin_home.html
+++ b/files/templates/CHRISTMAS/admin/admin_home.html
@@ -71,13 +71,13 @@
 			'icon': 'fa-republican',
 			'title': 'Agenda Posters',
 			'description': 'Users with agenda poster mode',
-			'link': '/admin/agendaposters'
+			'link': '/agendaposters'
 	    },
 	    {
 			'icon': 'fa-seedling',
 			'title': 'Grass Award',
 			'description': 'Users with active grass award',
-			'link': '/admin/grassed'
+			'link': '/grassed'
 	    },
 	    {
 			'icon': 'fa-users',
diff --git a/files/templates/CHRISTMAS/banner.html b/files/templates/CHRISTMAS/banner.html
index a53a6a267e..f881a9f30c 100644
--- a/files/templates/CHRISTMAS/banner.html
+++ b/files/templates/CHRISTMAS/banner.html
@@ -2,16 +2,18 @@
   {% if v %}
   <div class="flex items-center justify-center h-6 bg-gray-900 w-full">
     <span class="text-rainbow text-xs text-gray-200">
-      💖🌈 rdrama.net stands with the LGBTQ+ community.&nbsp;
-      <span class="font-medium hidden md:inline-block">Help keep our community inclusive and welcoming.&nbsp;</span>
+      💖🌈 Welcome to rdrama.net: <strong>/r/SubredditDrama official site.</strong>&nbsp;
+      <span class="font-medium hidden md:inline-block">
+        We proudly stand with the LGBTQ+ community! Help keep our community inclusive and welcoming.&nbsp;
+      </span>
       <strong><a href="https://secure.transequality.org/site/Donation2?df_id=1480">Learn more!</a></strong>
     </span>
   </div>
   {% else %}
    <div class="flex items-center justify-center h-6 bg-primary w-full">
     <span class="text-rainbow text-xs text-gray-200">
-      ✋😕 You are viewing a cached version of rdrama.net&nbsp;
-      <span class="font-medium hidden md:inline-block">Join the community to see the latest content.&nbsp;</span>
+      ✋😕 Welcome to rdrama.net: <strong>/r/SubredditDrama official site.</strong>&nbsp;
+      <span class="font-medium hidden md:inline-block">You are viewing a cached version of rdrama.net.&nbsp;</span>
       <strong><a href="/login">Login!</a></strong>
     </span>
   </div>
diff --git a/files/templates/CHRISTMAS/comments.html b/files/templates/CHRISTMAS/comments.html
index 839e7d5002..58cbf255a2 100644
--- a/files/templates/CHRISTMAS/comments.html
+++ b/files/templates/CHRISTMAS/comments.html
@@ -495,29 +495,6 @@
 		text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
 	}
 
-	.popover {
-		max-width: 50%;
-		box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
-		border-color: #dadada;
-	}
-
-	.popover-arrow {
-		display: none !important;
-	}
-
-	.popover-user-profile {
-		display: flex;
-		flex-direction: column;
-		padding: 0;
-		background: var(--gray-600);
-	}
-
-	.popover-body {
-		padding: 0;
-		border-radius: .25rem;
-		overflow: hidden;
-	}
-
 	.avatar-72 {
 		width: 72px;
 		height: 72px;
diff --git a/files/templates/CHRISTMAS/default.html b/files/templates/CHRISTMAS/default.html
index f65f2cba53..6781780a89 100644
--- a/files/templates/CHRISTMAS/default.html
+++ b/files/templates/CHRISTMAS/default.html
@@ -192,9 +192,9 @@
 
 		{% block stylesheets %}
 
-		<link rel="stylesheet" href="/static/assets/CHRISTMAS/css/main.css?a=7">
+		<link rel="stylesheet" href="/static/assets/CHRISTMAS/css/main.css?a=10">
 
-      	<link rel="stylesheet" href="/static/dist/main.css?a=7">
+      	<link rel="stylesheet" href="/static/dist/main.css?a=10">
 
 		{% if v %}
 			<style>:root{--primary:#dc2626}</style>
@@ -296,6 +296,7 @@
 
 {% if v %}
 	{% include "CHRISTMAS/modals/ModalThemePicker.html" %}
+	{% include "CHRISTMAS/modals/ModalDirectMessage.html" %}
 {% endif %}
 
 {% block popovers %}{% endblock %}
@@ -305,7 +306,7 @@
 {% block scripts %}{% endblock %}
 
 <!-- Scripts -->
-<script src="/static/assets/CHRISTMAS/js/header.js?a=1"></script>
+<script src="/static/assets/CHRISTMAS/js/header.js?a=2"></script>
 
 <!-- Lazy Loading -->
 <script src="/static/assets/CHRISTMAS/js/lozad.js?a=1"></script>
@@ -334,7 +335,7 @@
 <script src="/static/assets/CHRISTMAS/js/gif_modal.js?a=1"></script>
 <script src="/static/assets/CHRISTMAS/js/emoji_modal.js?a=16"></script>
 
-<script defer src="/static/assets/CHRISTMAS/js/popover.js?a=1"></script>
+<script defer src="/static/assets/CHRISTMAS/js/popover.js?a=58"></script>
 
 <script src="/static/assets/CHRISTMAS/js/mobile_navigation_bar.js?a=1"></script>
 
@@ -356,7 +357,7 @@
 		}
 	</script>
 {% endif %}
-	<script src="/static/assets/CHRISTMAS/js/default.js?a=2"></script>
+	<script src="/static/assets/CHRISTMAS/js/default.js?a=36"></script>
 
 </body>
 </html>
diff --git a/files/templates/CHRISTMAS/home.html b/files/templates/CHRISTMAS/home.html
index c5948cd583..f986457a25 100644
--- a/files/templates/CHRISTMAS/home.html
+++ b/files/templates/CHRISTMAS/home.html
@@ -28,7 +28,7 @@
 <div class="col-span-full xl:col-span-9 dark:bg-gray-700 md:dark:bg-gray-800">
 
 	<ul class="flex flex-col sm:py-4 my-2.5 sm:my-0" id="posts">
-		{% include "CHRISTMAS/submission_listing.html" %}
+		{% include "CHRISTMAS/submission/SubmissionList.html" %}
 	</ul>
 
 	{% if listing %}
diff --git a/files/templates/CHRISTMAS/leaderboard.html b/files/templates/CHRISTMAS/leaderboard.html
index 6e51fd1eb1..3901b42852 100644
--- a/files/templates/CHRISTMAS/leaderboard.html
+++ b/files/templates/CHRISTMAS/leaderboard.html
@@ -363,4 +363,51 @@
 		{% endfor %}
 	</div>
 </div>
+{% if users13 %}
+<div class="col-span-full mb-6">
+	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
+		<h2 class="text-2xl font-heading font-bold mb-0">
+			rDrama's 25 Biggest Marsey Artists
+		</h2>
+	</div>
+	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
+		{% for user in users13 %}
+		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users13.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
+			<!-- Rank -->
+			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
+				{{loop.index}}
+			</h2>
+			<div class="relative flex-shrink-0">
+				<img src="{{user[0].profile_url}}" class="flex-shrink-0 p-[3px] border w-13 h-13 object-cover {{ 'bg-red-800 border-red-900' if v.username == user[0].username else 'bg-white border-gray-300' }}" alt="{{ user[0].username }} avatar"/>
+				{% if loop.index == 1 %}
+				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="13px" class="absolute -top-1 -right-2.5 object-contain"/>
+				{% endif %}
+			</div>
+			<!-- User Details -->
+			<div class="ml-3">
+				{% if user[0]=='anton-d' %}
+					<span class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200">
+						{{user[0]}}
+					</span>
+					{% else %}
+					<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user[0].username}}">
+						{{user[0].username}}
+					</a>
+					{% if user[0].customtitle %}
+					<p class="text-sm" style="#{{user.namecolor}}">
+						{{user[0].customtitle | safe}}
+					</p>
+					{% endif %}
+				{% endif %}
+			</div>
+			<div class="ml-auto mr-4 pl-3">
+				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
+					{{user[1]}}
+				</span>
+			</div>
+		</div>
+		{% endfor %}
+	</div>
+</div>
+{% endif %}
 {% endblock %}
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/marseys.html b/files/templates/CHRISTMAS/marseys.html
new file mode 100644
index 0000000000..cf6a6639d6
--- /dev/null
+++ b/files/templates/CHRISTMAS/marseys.html
@@ -0,0 +1,28 @@
+{% extends "CHRISTMAS/default.html" %}
+{% block content %}
+<pre>
+
+	
+</pre>
+<div class="overflow-x-auto"><table class="table table-striped mb-5">
+<thead class="bg-primary text-white">
+	<tr>
+		<th style="font-weight: bold">#</th>
+		<th style="font-weight: bold">Name</th>
+		<th style="font-weight: bold">Marsey</th>
+		<th style="font-weight: bold">Author</th>
+	</tr>
+</thead>
+<tbody id="followers-table">
+{% for marsey, author in marseys %}
+	<tr>
+		<td style="font-weight: bold">{{loop.index}}</td>
+		<td style="font-weight: bold">{{marsey}}</td>
+		<td><img loading="lazy" data-bs-toggle="tooltip" alt=":{{marsey}}:" title=":{{marsey}}:" delay="0" src="/static/assets/images/emojis/{{marsey}}.webp" ></td>
+		<td>{% if author in ('anton-d','unknown') %}{{author}}{% else %}<a style="font-weight:bold;" href="/@{{author}}"><img alt="@{{author}}'s profile picture" loading="lazy" src="/@{{author}}/pic" class="pp20">{{author}}</a>{% endif %}</td>
+	</tr>
+{% endfor %}
+</tbody>
+</table>
+
+{% endblock %}
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/modals/ModalDirectMessage.html b/files/templates/CHRISTMAS/modals/ModalDirectMessage.html
index 423e82a70e..db83154567 100644
--- a/files/templates/CHRISTMAS/modals/ModalDirectMessage.html
+++ b/files/templates/CHRISTMAS/modals/ModalDirectMessage.html
@@ -2,29 +2,30 @@
 	<div class="modal-dialog modal-dialog-centered mx-auto max-w-xl" role="document">
 		<div class="modal-content mx-auto max-w-xl bg-gray-100 dark:bg-gray-700 rounded-md shadow-lg">
 			<div class="modal-header">
-				<h5 class="font-bold text-xl font-heading leading-normal">Send message to @{{u.username}}</h5>
+				<h5 class="modal-title font-bold text-xl font-heading leading-normal">Send message</h5>
 				<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
 					<span aria-hidden="true"><i class="far fa-times"></i></span>
 				</button>
 			</div>
 			<div class="modal-body">
-				<form id="message" action="/@{{u.username}}/message" method="post" enctype="multipart/form-data">
+				<!-- Form action loaded by JS -->
+				<form id="message">
 					<input type="hidden" name="formkey" value="{{v.formkey}}"> 
 					<div class="relative rounded border border-gray-300 dark:border-gray-900 bg-white dark:bg-white/[.05] w-full"> 
-						<textarea maxlength="1000" id="input-message" name="message" form="message" class="rounded-t bg-transparent p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Write your message..." rows="3"></textarea>
+						<textarea maxlength="1000" id="direct-message-input" name="message" form="message" class="rounded-t bg-transparent p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Write your message..." rows="3"></textarea>
 						<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-300 dark:border-white/[.05] mb-0">
 							<li>
-								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('input-message')">
+								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('direct-message-input')">
 									<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
 								</button>
 							</li>
 							<li>
-								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeItalics('input-message')">
+								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeItalics('direct-message-input')">
 									<i class="fas fa-italic fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Italicize"></i>
 								</button>
 							</li>
 							<li>
-								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeQuote('input-message')">
+								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeQuote('direct-message-input')">
 									<i class="fas fa-quote-right fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Quote"></i>
 								</button>
 							</li>
diff --git a/files/templates/CHRISTMAS/modals/ModalGiftCoins.html b/files/templates/CHRISTMAS/modals/ModalGiftCoins.html
index c39d1b0d2e..393c6d5fe0 100644
--- a/files/templates/CHRISTMAS/modals/ModalGiftCoins.html
+++ b/files/templates/CHRISTMAS/modals/ModalGiftCoins.html
@@ -10,7 +10,7 @@
 			<div class="relative modal-body">
 				<!-- If user has less than 100 dramacoin, disable form -->
 				{% if v.coins < 100 %}
-				<div class="absolute left-0 bottom-0 flex flex-col items-center justify-center w-full h-full bg-white/60 dark:bg-white/10 z-10">
+				<div class="absolute left-0 bottom-0 flex flex-col items-center justify-center w-full h-full bg-white/60 dark:bg-gray-700/90 z-10">
 					<p class="text-lg font-bold mb-0">
 						You need at least 100 dramacoin to send coins.
 					</p>
@@ -20,7 +20,7 @@
 				</div>
 				{% endif %}
 				<!-- Form -->
-				<form class="profile-toggleable" id="message" action="/@{{u.username}}/message" method="post">
+				<div class="profile-toggleable" id="message">
 					<div class="relative rounded-lg border border-gray-300 dark:border-gray-900 bg-gray-100 dark:bg-white/[.05] shadow-inner w-full"> 
 						<textarea maxlength="1000" id="gift-message" name="message" form="message" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white dark:focus:bg-transparent shadow-inner resize-y focus:outline-none placehoder:text-gray-400" aria-label="With textarea" placeholder="'tis the season of giving..." rows="3"></textarea>
 						<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
@@ -41,7 +41,7 @@
 							</li>
 						</ul>
 					</div>
-				</form>
+				</div>
 				<div class="mt-3">
 					<input autocomplete="off" id="coins-transfer-amount" class="form-input" name="amount" type="number" placeholder="0" oninput="updateTax()">
 					<p class="mt-1 text-sm text-gray-400">
@@ -49,11 +49,11 @@
 					</p>
 				</div>
 			</div>
-			<div class="flex justify-end space-x-2 border-t border-gray-300 p-4">
-				<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-700" data-bs-dismiss="modal">
+			<div class="flex justify-end space-x-2 border-t border-gray-300 dark:border-gray-800 p-4">
+				<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-400" data-bs-dismiss="modal">
 					Cancel
 				</button>
-				<button onclick="transferCoins()" class="btn btn-green {{ 'cursor-not-allowed' if v.coins < 100 }}" {% if v.coins < 100 %}disabled{% endif %}>
+				<button onclick="transferCoins()" class="btn btn-yellow {{ 'cursor-not-allowed' if v.coins < 100 }}" {% if v.coins < 100 %}disabled{% endif %}>
 					Gift coins
 				</button>
 			</div>
diff --git a/files/templates/CHRISTMAS/settings.html b/files/templates/CHRISTMAS/settings.html
index 9dc5dc9854..7a9b3bf7ee 100644
--- a/files/templates/CHRISTMAS/settings.html
+++ b/files/templates/CHRISTMAS/settings.html
@@ -34,9 +34,9 @@
 
 	{% block stylesheets %}
 
-	<link rel="stylesheet" href="/static/assets/CHRISTMAS/css/main.css?a=7">
+	<link rel="stylesheet" href="/static/assets/CHRISTMAS/css/main.css?a=10">
 
-  	<link rel="stylesheet" href="/static/dist/main.css?a=7">
+  	<link rel="stylesheet" href="/static/dist/main.css?a=10">
 
 	{% if v %}
 		<style>:root{--primary:#{{v.themecolor}}}</style>
@@ -237,6 +237,6 @@
 
 	{% endif %}
 
-	<script src="/assets/CHRISTMAS/js/default.js?a=2"></script>
+	<script src="/assets/CHRISTMAS/js/default.js?a=36"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/settings_filters.html b/files/templates/CHRISTMAS/settings_filters.html
index fa0c9967f3..96621293d2 100644
--- a/files/templates/CHRISTMAS/settings_filters.html
+++ b/files/templates/CHRISTMAS/settings_filters.html
@@ -29,7 +29,7 @@
 
 			<h2 class="label text-black">Highlight New Comments</h2>
 
-			<div class="body w-lg-100">
+			<div class="body w-lg-100 mb-4">
 
 				<div>
 					<input type="checkbox" id="highlightcomments" name="highlightcomments"{% if v.highlightcomments %} checked{% endif %} onchange="post_toast('/settings/profile?highlightcomments='+document.getElementById('highlightcomments').checked);">
@@ -40,6 +40,16 @@
 
 			</div>
 
+			<h2 class="label text-black">
+				Compact mode
+				<span class="badge badge-yellow">New!</span>
+			</h2>
+
+			<div class="mb-4">
+				<input type="checkbox" id="compactMode" name="compact" {% if v.compact %}checked{% endif %} onchange="post_toast('/settings/profile?compact='+this.checked)">
+				<label class="inline-block pl-2 text-gray-400" for="compactMode">View posts in a comapct format.</label>
+			</div>
+
 			<h2 class="label text-black">Card view</h2>
 
 			<div>
diff --git a/files/templates/CHRISTMAS/submission/SubmissionActions.html b/files/templates/CHRISTMAS/submission/SubmissionActions.html
index 8421236827..763fee9645 100644
--- a/files/templates/CHRISTMAS/submission/SubmissionActions.html
+++ b/files/templates/CHRISTMAS/submission/SubmissionActions.html
@@ -1,4 +1,4 @@
-<ul class="flex flex-wrap items-center space-x-3 gap-2 text-sm text-gray-500 mb-0">
+<ul class="inline-flex flex-wrap items-center space-x-3 gap-2 text-sm text-gray-500 mb-0">
 
 	{% if p.realbody(v) and '/post/' not in request.full_path and not p.over_18 %}
 	<li>
diff --git a/files/templates/CHRISTMAS/submission/SubmissionList.html b/files/templates/CHRISTMAS/submission/SubmissionList.html
new file mode 100644
index 0000000000..1d04a77624
--- /dev/null
+++ b/files/templates/CHRISTMAS/submission/SubmissionList.html
@@ -0,0 +1,6 @@
+<!-- Display list of posts -->
+{% if v and v.compact %}
+	{% include "CHRISTMAS/submission_listing_compact.html" %}
+{% else %}
+	{% include "CHRISTMAS/submission_listing.html" %}
+{% endif %}
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/submission_listing.html b/files/templates/CHRISTMAS/submission_listing.html
index 44775678e4..a94a10fcf7 100644
--- a/files/templates/CHRISTMAS/submission_listing.html
+++ b/files/templates/CHRISTMAS/submission_listing.html
@@ -55,7 +55,7 @@
 			</div>
 
 			{% if not postembed %}
-			<div class="py-2 text-sm text-gray-400 text-center font-bold hidden md:block">
+			<div class="pt-2 text-sm text-gray-400 text-center font-bold hidden md:block">
 				{% if v and request.path.startswith('/@') and not v.admin_level %}
 
 					{% if voted==1 %}
@@ -253,7 +253,7 @@
 				</div>
 			{% endif %}
 
-			<div class="relative z-20 hidden md:block pt-3">
+			<div class="relative z-20 hidden md:block pt-2">
 				{% include "CHRISTMAS/submission/SubmissionActions.html" %}
 			</div>
 	</div>
diff --git a/files/templates/CHRISTMAS/submission_listing_compact.html b/files/templates/CHRISTMAS/submission_listing_compact.html
new file mode 100644
index 0000000000..40106895b6
--- /dev/null
+++ b/files/templates/CHRISTMAS/submission_listing_compact.html
@@ -0,0 +1,407 @@
+{% if v %}
+	{% include "CHRISTMAS/award_modal.html" %}
+{% endif %}
+
+{% for p in listing %}
+
+{% set ups=p.upvotes %}
+{% set downs=p.downvotes %}
+{% set score=ups-downs %}
+
+{% if v %}
+	{% set voted= p.voted %}
+{% else %}
+	{% set voted=-2 %}
+{% endif %}
+
+{% if request.host == 'pcmemes.net' %}
+	{% set cc='SPLASH MOUNTAIN' %}
+{% else %}
+	{% set cc='COUNTRY CLUB' %}
+{% endif %}
+
+{% if p.active_flags %}
+	<div id="flaggers-{{p.id}}" class="relative mb-5 px-3 py-2 rounded-md bg-red-100 border border-red-200 hidden">
+		<div class="font-medium uppercase text-sm tracking-wider text-red-700 leading-normal mb-2">
+			<i class="fas fa-flag fa-fw mr-2 fa-sm"></i>Reported by:
+		</div>
+		<ul class="mb-0 flex flex-col space-y-3 divide-y divide-red-300 text-black">
+			{% for f in p.ordered_flags %}
+				<li class="flex flex-wrap">
+					<a class="font-bold text-black hover:text-primary" href="{{f.user.url}}">
+						{{f.user.username}}
+					</a>
+					<p class="pl-1">{% if f.reason %} - {{f.reason | safe}}{% endif %} {% if v.admin_level==6 %}</p>
+					<button class="text-red-600 hover:underline" onclick="post_toast('/del_report/p{{ f.id }}')">
+						remove
+					</button>
+					{% endif %}
+				</li>
+			{% endfor %}
+		</ul>
+		<button class="absolute top-1 right-3 text-red-400 hover:text-red-700" onclick="document.getElementById('flaggers-{{p.id}}').classList.toggle('hidden')">
+			<i class="fas fa-times"></i>
+		</button>
+	</div>
+{% endif %}
+
+<li id="post-{{p.id}}" class="relative p-2.5 md:py-1 md:px-2.5 border-b border-gray-300 dark:border-white/[.05] {% if p.is_banned %}bg-red-200{% elif p.deleted_utc %}bg-yellow-200{% else %} md:bg-transparent bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-white/10 dark:md:bg-transparent{% endif %} {% if p.stickied %} stickied{% endif %}{% if voted==1 %} upvoted{% elif voted==-1 %} downvoted{% endif %}{% if p.over_18 %} nsfw{% endif %} list-none group">
+
+	<div class="flex flex-nowrap items-center">
+
+		<div class="relative z-10 hidden md:flex flex-col flex-shrink-0 items-center mr-4">
+
+			{% if not postembed %}
+			<div class="text-sm text-gray-400 text-center font-bold hidden md:flex space-x-2">
+				{% if v and request.path.startswith('/@') and not v.admin_level %}
+
+					{% if voted==1 %}
+					<div class="mx-auto arrow-up post-{{p.id}}-up active"></div>
+					{% endif %}
+
+					<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
+
+					{% if voted==-1 %}
+						<div class="mx-auto arrow-down post-{{p.id}}-down active"></div>
+					{% endif %}
+
+					{% elif v %}
+
+					<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}"></div>
+
+					<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
+
+					<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></div>
+
+					{% else %}
+
+					<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up" onclick="location.href='/login';"></div>
+
+					<span id="post-{{p.id}}-score-none" class="score"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
+
+					<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="mx-auto arrow-down" onclick="location.href='/login';"></div>
+
+				{% endif %}
+			</div>
+			{% endif %}
+		</div>
+		  
+		<div class="w-full overflow-x-hidden md:overflow-x-visible">
+
+			<div class="relative z-10 no-scrollbar overflow-y-hidden overflow-x-auto inline-flex items-center space-x-2 text-sm text-gray-500 leading-normal mb-0.5 {% if p.award_count('ghosts') %}ghosts{% endif %}">
+
+				<div class="relative flex-shrink-0">
+					<img loading="lazy" src="{{ p.author.profile_url }}" class="flex-shrink-0 w-5 h-5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="{{ p.author.username }} avatar"/>
+				</div>
+
+				{% if p.author.shadowbanned or p.distinguish_level or p.is_bot or p.is_blocking or p.is_blocked or p.author.verified %}
+				<span class="flex-shrink-0">
+					{% if v and v.admin_level==6 and p.author.shadowbanned %}
+					<i class="fas fa-user-times fa-fw fa-sm text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Shadowbanned by @{{p.author.shadowbanned}}"></i>
+					{% endif %}
+					{% if p.distinguish_level %}
+					<i class="fas fa-broom fa-fw fa-sm text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{'SITE_NAME' | app_config}} Admin, speaking officially"></i>
+					{% endif %}
+					{% if p.is_bot %}
+					<i class="fad fa-robot fa-fw fa-sm text-info" data-bs-toggle="tooltip" data-bs-placement="bottom"	title="" data-bs-original-title="Bot"></i>
+					{% endif %}
+					{% if p.is_blocking %}
+					<i class="fas fa-user-minus fa-fw fa-sm text-yellow-600" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="You're blocking this user, but you can see this post because you're an admin."></i>
+					{% endif %}
+					{% if p.is_blocked %}
+					<i class="fas fa-user-minus fa-fw fa-sm text-red-600" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="This user is blocking you."></i>
+					{% endif %}
+					{% if p.author.verified %}
+					<i class="fas fa-badge-check fa-fw fa-sm" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{p.author.verified}}"></i>
+					{% endif %}
+				</span>
+				{% endif %}
+
+				{% if not p.award_count('ghosts') %}
+				<span class="flex-shrink-0">
+					<a class="user-name" onclick='userPopover({{p.author.json_popover(v) | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" href="javascript:void(0)" tabindex="0" style="color: #{{p.author.namecolor}};">
+						<span class="inline-flex flex-shrink-0 items-center">
+							{% if p.author.patron and not p.distinguish_level %}
+							<span class="patron flex-shrink-0" style="background-color:#{{p.author.namecolor}};">
+								{{p.author.username}}
+							</span>
+							{% elif p.distinguish_level and request.host == 'rdrama.net' %}
+							<span class="mod flex-shrink-0">
+								{{p.author.username}}
+							</span>
+							{% else %}
+							{{p.author.username}}
+							{% endif %}
+						</span>
+					</a>
+				</span>
+				{% if p.author.customtitle %}
+					<bdi class="flex-shrink-0" style="color: #{{p.author.titlecolor}}">
+						{% if p.author.quadrant %}
+							<img loading="lazy" height="20" src="/assets/CHRISTMAS/images/PCM/quadrants/{{p.author.quadrant}}.gif">
+						{% endif %}
+						{{p.author.customtitle | safe}}
+					</bdi>
+				{% endif %}
+				{% endif %}
+				<span class="flex-shrink-0" onmouseover="timestamp('timestamp-{{p.id}}','{{p.created_utc}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" id="timestamp-{{p.id}}">
+					{{p.age_string}}
+				</span>
+
+				{% if p.edited_utc %}
+					Edited
+					<span class="flex-shrink-0" data-bs-toggle="tooltip" data-bs-placement="bottom" id="edited_timestamp-{{p.id}}">{{p.edited_string}}
+					</span>
+				{% endif %}
+				
+				{% if p.is_image %}
+					<span class="flex-shrink-0">(image post)</span>
+				{% elif p.is_video %}
+					<span class="flex-shrink-0">(video post)</span>
+				{% elif p.realurl(v) %}
+					<a class="flex-shrink-0" class="text-gray-500 hover:underline" href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
+						({{p.domain}})
+					</a>
+					{% else %}
+					<span class="flex-shrink-0">(text post)</span>
+				{% endif %}
+
+				{% if p.active_flags %}
+					<button class="flex-shrink-0 badge badge-red" onclick="document.getElementById('flaggers-{{p.id}}').classList.toggle('hidden')">
+						<i class="fas fa-gavel fa-sm fa-fw"></i>
+						{{p.active_flags}} Reports
+					</button>
+				{% endif %}
+
+				{% if p.bannedfor and p.author.banned_by %}
+					<span class="flex-shrink-0">
+						<i class="fad fa-gavel fa-fw fa-sm text-red-600" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="User was banned for this post by @{{p.author.banned_by.username}}"></i>
+					</span>
+				{% endif %}
+
+				{% if p.flair or p.over_18 or p.club or p.stickied or (p.is_pinned and request.path.startswith('/@')) or p.private or p.awards %}
+				<ul class="flex-shrink-0 flex space-x-2 items-center mb-0">
+					<!-- Flair -->
+					{% if p.flair %}
+					<li>
+						<span class="badge badge-purple">
+							{{p.flair | safe}}
+						</span>
+					</li>
+					{% endif %}
+					<!-- NSFW -->
+					{% if p.over_18 %}
+					<li>
+						<span class="badge badge-red">+18</span>
+					</li>
+					{% endif %}
+					<!-- Country Club -->
+					{% if p.club %}
+					<li>
+						<span class="badge badge-yellow">Country Club</span>
+					</li>
+					{% endif %}
+					<!-- Stickied -->
+					{% if p.stickied and (p.stickied.startswith('t:') or p.stickied.startswith('j:')) %}
+					<li>
+						<span id="pinned-{{p.id}}" class="badge badge-pink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-timestamp={{p.stickied[2:]}} onmouseover="pinned_timestamp('pinned-{{p.id}}')"}>
+							<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
+							Pinned
+						</span>
+					</li>
+					{% elif p.stickied %}
+					<li>
+						<span id="pinned-{{p.id}}" class="badge badge-pink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Pinned by @{{p.stickied}}">
+							<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
+							Pinned
+						</span>
+					</li>
+					{% endif %}
+					<!-- Private -->
+					{% if p.private %}
+					<li>
+						<span class="badge badge-blue">
+							<i class="fas fa-lock-alt fa-sm fa-fw1"></i>
+							Draft
+						</span>
+					</li>
+					{% endif %}
+					<!-- Awards -->
+					{% if p.awards %}
+					{% for a in p.awards %}
+					<li>
+						<i class="{{a.class_list}} fa-sm fa-fw" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{a.title}} Award given by @{{a.user.username}}"></i>
+					</li>
+					{% endfor %}
+					{% endif %}
+				</ul>
+			{% endif %}
+			</div>
+			
+			<h5 class="post-title font-medium text-base leading-5 mb-0.5">
+				<a {% if v and v.newtab %}target="_blank"{% endif %} href="{{p.permalink}}" class="{% if p.author.agendaposter %}agendaposter{% endif %} stretched-link text-black dark:text-gray-100 group-hover:text-primary dark:group-hover:text-primary visited:text-gray-700 dark:visited:text-gray-400 break-words" style="word-break: break-word;">
+				{{p.realtitle(v) | safe}}
+				</a>
+			</h5>
+
+			{% if p.realbody(v) and not p.over_18 %}
+				<div class="{% if p.author.agendaposter %}agendaposter{% endif %} post-text relative z-10 overflow-hidden pointer-events-none text-gray-500 break-words hidden" style="word-break: break-word;" id="post-text-{{p.id}}">
+					{{p.realbody(v) | safe}}
+				</div>
+			{% endif %}
+
+			<div class="relative z-10 group-hover:z-20 hidden md:inline-block">
+				{% include "CHRISTMAS/submission/SubmissionActions.html" %}
+			</div>
+	</div>
+
+		<div class="relative z-10 flex flex-row flex-nowrap pl-3 md:pl-5 flex-shrink-0">
+			{% if p.club and not (v and (v.paid_dues or v.id == p.author_id)) %}
+				<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+			{% elif not p.url %}
+				<a {% if v and v.newtab %}target="_blank"{% endif %} {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+				</a>
+			{% elif p.is_image %}
+				<a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#expandImageModal" data-bs-url="{{p.realurl(v)}}" onclick="expandDesktopImage('{{ p.realurl(v) }}')">
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+				</a>
+			{% elif p.is_video %}
+				<a href="javascript:void(0)" onclick="toggleVideo({{p.id}})">
+					<img alt="post thumnail" loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+				</a>
+			{% elif p.is_youtube %}
+				<a href="javascript:void(0)" onclick="document.getElementById('video-{{p.id}}').classList.toggle('hidden')">
+					<img alt="post thumnail" loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+				</a>
+			{% else %}
+				<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover  bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+				</a>
+			{% endif %}
+		</div>
+
+</div>
+
+{% if p.is_image and not p.over_18 and ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}
+<div class="md:ml-[4.5rem] mt-4">
+	<a target="_blank" rel="nofollow noopener noreferrer" href="{{p.url}}" class="inline-block">
+		<img loading="lazy" src="/assets/CHRISTMAS/images/loading.gif" data-src="{{p.url}}" class="shadow-md p-1 bg-white dark:bg-gray-900 w-full md:w-64" alt="Post preview">
+	</a>
+</div>
+{% endif %}
+
+{% if not p.club or v and (v.paid_dues or v.id == p.author_id) and (p.is_video or p.is_youtube) %}
+<div class="relative z-10">
+	{% if p.is_video %}
+		<div id="video-{{p.id}}" class="text-center {% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} md:ml-[4.5rem] mt-3">
+			<video controls loop preload="metadata" class="w-full max-h-[20rem]">
+				<source src="{{p.realurl(v)}}" type="video/mp4">
+			</video>
+		</div>
+	{% elif p.is_youtube %}
+		<div id="video-{{p.id}}" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} md:ml-[4.5rem] mt-3">
+			{{p.embed_url | safe}}
+		</div>
+	{% endif %}
+</div>
+{% endif %}
+
+<div class="relative z-10 group-hover:z-20 md:hidden pt-2 md:pt-0">
+	{% include "CHRISTMAS/submission/SubmissionActionsMobile.html" %}
+</div>
+
+{% include "CHRISTMAS/modals/ModalSubmissionActions.html" %}
+
+</li>
+
+{% else %}
+
+{% if request.path.endswith('/admin/queue') %}
+
+<div class="row no-gutters">	
+	<div class="col">			
+		<div class="text-center py-7">
+			<div class="h4 p-2">This queue is empty. (That's a good thing.)</div>
+		</div>			
+	</div>	
+</div>
+
+
+{% elif u %}
+{% if v and v.id == u.id %}
+<div class="row no-gutters">	
+	<div class="col">			
+		<div class="text-center px-3 my-3">
+			<span class="fa-stack fa-2x text-muted mb-4">
+				<i class="fas fa-square text-gray-500 opacity-25 fa-stack-2x"></i>
+				<i class="fas text-gray-500 fa-ghost fa-stack-1x text-lg"></i>
+			</span>
+			<h2 class="h5">You haven't {% if "saved" in request.full_path %}saved{% else %}made{% endif %} a post yet</h2>
+			<p class="text-muted mb-md-5">Your {% if "saved" in request.full_path %}saved posts{% else %}posting history{% endif %} will show here.</p>
+			{% if "saved" not in request.full_path %}<a href="/submit" class="btn btn-primary">Create a post</a>{% endif %}
+		</div>			
+	</div>	
+</div>
+
+
+{% else %}
+<div class="row no-gutters">	
+	<div class="col">			
+		<div class="text-center px-3 my-3">
+			<span class="fa-stack fa-2x text-muted mb-4">
+				<i class="fas fa-square text-gray-500 opacity-25 fa-stack-2x"></i>
+				<i class="fas text-gray-500 fa-scroll-old fa-stack-1x text-lg"></i>
+			</span>
+			<h2 class="h5">@{{u.username}} hasn't made a post yet</h2>
+			<p class="text-muted">Their posting history will show here.</p>
+			<pre>
+			</pre>
+		</div>			
+	</div>	
+</div>
+{% endif %}
+
+{% else %}
+<div class="flex flex-col items-center justify-center py-24 md:py-48">
+	<img loading="lazy" src="https://c.tenor.com/NhDy-AkelhQAAAAM/marsey-drama.gif" class="w-20 h-20 mb-4 rounded-md object-cover"/>
+	<h2 class="text-xl font-bold leading-normal font-heading text-black">No posts here -_-</h2>
+	<p class="text-gray-500">
+		Looks like there is no content atm.
+	</p>
+</div>	
+{% endif %}
+
+{% endfor %}
+
+{% if v %}
+	{% include "CHRISTMAS/delete_post_modal.html" %}
+	{% include "CHRISTMAS/report_post_modal.html" %}
+	{% if v.admin_level == 6 %}
+		{% include "CHRISTMAS/ban_modal.html" %}
+	{% endif %}
+{% endif %}
+
+{% include "CHRISTMAS/expanded_image_modal.html" %}
+
+<script defer src="/assets/CHRISTMAS/js/new_comments_count.js?a=1"></script>
+<script defer src="/assets/CHRISTMAS/js/submission_listing.js?a=6"></script>
+
+<style>
+	.mod:before {
+		content: '(((';
+	}
+
+	.mod:after {
+		content: ')))';
+	}
+
+	.mod {
+		padding: 2px 5px 3px 5px;
+		border-radius: 5px;
+		color:white!important;
+		background: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
+		background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet );
+		text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
+	}
+</style>
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/toasts/toasts.html b/files/templates/CHRISTMAS/toasts/toasts.html
index 7cba26289e..24a8193127 100644
--- a/files/templates/CHRISTMAS/toasts/toasts.html
+++ b/files/templates/CHRISTMAS/toasts/toasts.html
@@ -1,16 +1,27 @@
+<!-- Clipboard copy toast -->
 <div class="toast clipboard" id="toast-success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
-	<div class="toast-body bg-green-500 border border-green-900 text-center text-white">
-		<i class="fas fa-check-circle text-success mr-2"></i>Link copied to clipboard
+	<div class="flex items-center justify-center p-3 bg-green-500 border border-green-600 text-center text-white rounded shadow-inset-t-white-10">
+		<i class="fas fa-copy fa-fw mr-2"></i>
+		<span>
+			Link copied to clipboard!
+		</span>
 	</div>
 </div>
-
-<div class="toast" id="toast-post-success" style="position: fixed; bottom: 1.5rem; margin: 0 auto; left: 0; right: 0; width: 275px; z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
-	<div class="toast-body bg-green-500 border border-green-900 text-center text-white">
-		<i class="fas fa-comment-alt-smile mr-2"></i><span id="toast-post-success-text">Action successful!</span>
+<!-- Global success toast -->
+<div id="toast-post-success" class="toast fixed bottom-4 mx-auto left-0 right-0 w-96" style="z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
+	<div class="flex items-center justify-center p-3 bg-green-500 border border-green-600 text-center text-white rounded shadow-inset-t-white-10">
+		<i class="fas fa-check-circle fa-fw mr-2"></i>
+		<span id="toast-post-success-text">
+			Action successful!
+		</span>
 	</div>
 </div>
-<div class="toast" id="toast-post-error" style="position: fixed; bottom: 1.5rem; margin: 0 auto; left: 0; right: 0; width: 275px; z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
-	<div class="toast-body bg-red-500 border border-red-900 text-center text-white">
-		<i class="fas fa-exclamation-circle mr-2"></i><span id="toast-post-error-text">Error, please try again later.</span>
+<!-- Global error toast -->
+<div id="toast-post-error" class="toast fixed bottom-4 mx-auto left-0 right-0 w-96" style="z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
+		<div class="flex items-center justify-center p-3 bg-red-500 border border-red-600 text-center text-white rounded shadow-inset-t-white-10">
+		<i class="fas fa-exclamation-circle fa-fw mr-2"></i>
+		<span id="toast-post-error-text">
+			Error, please try again later.
+		</span>
 	</div>
 </div>
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/userpage.html b/files/templates/CHRISTMAS/userpage.html
index bf97029771..59e34e6e1e 100644
--- a/files/templates/CHRISTMAS/userpage.html
+++ b/files/templates/CHRISTMAS/userpage.html
@@ -38,7 +38,7 @@
 	<div class="absolute -top-12 right-3">
 		<ul class="flex flex-wrap space-x-2 items-center mb-0">
 			{% if v.admin_level > 1 %}
-			<li>
+			<li class="md:hidden">
 				{% include 'CHRISTMAS//dropdowns/ProfileAdminDropdown.html' %}
 			</li>
 			{% endif %}
@@ -69,6 +69,12 @@
 				</li>
 				{% endif %}
 				{% if v.id != u.id %}
+				<li>
+					<button class="btn btn-gray shadow" data-bs-toggle="modal" data-bs-target="#giftCoinsModal">
+						<i class="fas fa-gift fa-sm fa-fw md:mr-1"></i>
+						<span class="hidden md:inline-block">Gift Coins</span>
+					</button >
+				</li>
 				<li>
 					<button class="btn btn-gray shadow" data-bs-toggle="modal" data-bs-target="#directMessageModal">
 						<i class="fas fa-paper-plane fa-sm fa-fw md:mr-1"></i>
@@ -390,7 +396,6 @@
 {% if v %}
 	{% include "CHRISTMAS/emoji_modal.html" %}
 	{% include "CHRISTMAS/gif_modal.html" %}
-	{% include "CHRISTMAS/modals/ModalDirectMessage.html" %}
 	{% include "CHRISTMAS/modals/ModalGiftCoins.html" %}
 	{% if v.admin_level > 1 %}
 		{% include "CHRISTMAS/modals/ModalAdminManageUser.html" %}