diff --git a/files/static/dist/main.css b/files/static/dist/main.css
index 8e89bb277..7ebad14f1 100644
--- a/files/static/dist/main.css
+++ b/files/static/dist/main.css
@@ -1592,6 +1592,9 @@ video {
 	--tw-border-opacity: 1;
 	border-color: rgba(254, 202, 202, var(--tw-border-opacity));
 }
+.border-transparent {
+	border-color: transparent;
+}
 .border-yellow-600 {
 	--tw-border-opacity: 1;
 	border-color: rgba(217, 119, 6, var(--tw-border-opacity));
@@ -1626,6 +1629,10 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
+.bg-gray-200 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(var(--color-200), var(--tw-bg-opacity));
+}
 .bg-primary\/20 {
 	background-color: rgba(var(--color-primary), 0.2);
 }
@@ -1656,10 +1663,6 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
 }
-.bg-gray-200 {
-	--tw-bg-opacity: 1;
-	background-color: rgba(var(--color-200), var(--tw-bg-opacity));
-}
 .bg-gray-300\/50 {
 	background-color: rgba(var(--color-300), 0.5);
 }
@@ -1928,6 +1931,50 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
+.bg-\[\#252525\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(37, 37, 37, var(--tw-bg-opacity));
+}
+.bg-\[\#e1e1e1\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(225, 225, 225, var(--tw-bg-opacity));
+}
+.bg-\[\#ffffff\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+.bg-\[\#0084b4\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(0, 132, 180, var(--tw-bg-opacity));
+}
+.bg-\[\#462f2f\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(70, 47, 47, var(--tw-bg-opacity));
+}
+.bg-\[\#342020\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(52, 32, 32, var(--tw-bg-opacity));
+}
+.bg-\[\#deb010\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(222, 176, 16, var(--tw-bg-opacity));
+}
+.bg-\[\#1f3726\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(31, 55, 38, var(--tw-bg-opacity));
+}
+.bg-\[\#dbd1d1\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(219, 209, 209, var(--tw-bg-opacity));
+}
+.bg-\[\#ebe5e5\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(235, 229, 229, var(--tw-bg-opacity));
+}
+.bg-\[\#365314\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(54, 83, 20, var(--tw-bg-opacity));
+}
 .bg-gray-300\/40 {
 	background-color: rgba(var(--color-300), 0.4);
 }
@@ -1957,10 +2004,6 @@ video {
 	--tw-gradient-from: rgb(var(--color-500));
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-500), 0));
 }
-.from-gray-800 {
-	--tw-gradient-from: rgb(var(--color-800));
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-800), 0));
-}
 .from-green-700 {
 	--tw-gradient-from: #15803d;
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(21, 128, 61, 0));
@@ -1982,9 +2025,6 @@ video {
 .to-gray-400 {
 	--tw-gradient-to: rgb(var(--color-400));
 }
-.to-gray-700 {
-	--tw-gradient-to: rgb(var(--color-700));
-}
 .to-green-600 {
 	--tw-gradient-to: #16a34a;
 }
@@ -2288,6 +2328,10 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(220, 38, 38, var(--tw-text-opacity));
 }
+.text-green-700 {
+	--tw-text-opacity: 1;
+	color: rgba(21, 128, 61, var(--tw-text-opacity));
+}
 .text-gray-200 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
@@ -2414,6 +2458,18 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(72, 236, 135, var(--tw-text-opacity));
 }
+.text-\[\#0084b4\] {
+	--tw-text-opacity: 1;
+	color: rgba(0, 132, 180, var(--tw-text-opacity));
+}
+.text-\[\#deb010\] {
+	--tw-text-opacity: 1;
+	color: rgba(222, 176, 16, var(--tw-text-opacity));
+}
+.text-\[\#365314\] {
+	--tw-text-opacity: 1;
+	color: rgba(54, 83, 20, var(--tw-text-opacity));
+}
 .antialiased {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -2497,6 +2553,19 @@ video {
 			scrollbar-width: none;  /* Firefox */
 		}
 
+.theme-mountain-bluebird {
+	--color-primary: 0,132,180;
+	--color-100: 255,255,255;
+	--color-200: 255,255,255;
+	--color-300: 232,232,232;
+	--color-400: 180,180,180;
+	--color-500: 153,153,153;
+	--color-600: 51,51,51;
+	--color-700: 37,37,37;
+	--color-800: 37,37,37;
+	--color-900: 0,0,0;
+}
+
 .theme-blood-orange {
 	--color-primary: 249,115,22;
 	--color-100: 224,231,255;
@@ -2576,7 +2645,7 @@ video {
 }
 
 .theme-choco-mint {
-	--color-primary: 37, 193, 136;
+	--color-primary: 37,193,136;
 	--color-100: 246,246,244;
 	--color-200: 235,232,229;
 	--color-300: 219,218,209;
@@ -2588,6 +2657,32 @@ video {
 	--color-900: 40,37,17;
 }
 
+.theme-redwood {
+	--color-primary: 222,176,16;
+	--color-100: 246,244,244;
+	--color-200: 235,229,229;
+	--color-300: 219,209,209;
+	--color-400: 177,159,159;
+	--color-500: 130,110,110;
+	--color-600: 99,96,77;
+	--color-700: 70,47,47;
+	--color-800: 52,32,32;
+	--color-900: 40,17,17;
+}
+
+.theme-sequoia {
+	--color-primary: 54,83,20;
+	--color-100: 246,244,244;
+	--color-200: 235,229,229;
+	--color-300: 219,209,209;
+	--color-400: 177,159,159;
+	--color-500: 130,110,110;
+	--color-600: 99,96,77;
+	--color-700: 70,47,47;
+	--color-800: 52,32,32;
+	--color-900: 40,17,17;
+}
+
 .theme-dramblr {
 	--color-primary: 2,132,199;
 	--color-100: 241,245,249;
@@ -2953,6 +3048,16 @@ video {
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
 
+	/* ---------------------- NAV TABS ---------------------- */
+	.nav.nav-tabs .nav-link {
+	border-bottom-width: 2px;
+	border-color: transparent;
+}
+	.nav.nav-tabs .nav-link.active {
+	--tw-border-opacity: 1;
+	border-color: rgba(var(--color-primary), var(--tw-border-opacity));
+}
+
 	/* ----------------------- BADGES ----------------------- */
 	.badge {
 	border-radius: 0.25rem;
@@ -3234,16 +3339,6 @@ video {
 	color: rgba(var(--color-800), var(--tw-text-opacity));
 }
 
-	.hover\:text-red-500:hover {
-	--tw-text-opacity: 1;
-	color: rgba(239, 68, 68, var(--tw-text-opacity));
-}
-
-	.hover\:text-red-600:hover {
-	--tw-text-opacity: 1;
-	color: rgba(220, 38, 38, var(--tw-text-opacity));
-}
-
 	.hover\:underline:hover {
 	text-decoration: underline;
 }
@@ -3271,11 +3366,6 @@ video {
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
 
-	.focus\:from-gray-700:focus {
-	--tw-gradient-from: rgb(var(--color-700));
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-700), 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));
@@ -3296,10 +3386,6 @@ video {
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 101, 52, 0));
 }
 
-	.focus\:to-gray-800:focus {
-	--tw-gradient-to: rgb(var(--color-800));
-}
-
 	.focus\:to-red-700:focus {
 	--tw-gradient-to: #b91c1c;
 }
@@ -3340,6 +3426,11 @@ video {
 	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));
@@ -3482,15 +3573,15 @@ video {
 	background-color: rgba(var(--color-900), var(--tw-bg-opacity));
 }
 
+	.dark .dark\:bg-white\/\[\.05\] {
+	background-color: rgba(255, 255, 255, .05);
+}
+
 	.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);
 }
@@ -3513,6 +3604,11 @@ video {
 	color: rgba(var(--color-400), 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-200 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
@@ -3552,6 +3648,11 @@ video {
 	background-color: transparent;
 }
 
+	.dark .dark\:focus\:text-gray-400:focus {
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-400), var(--tw-text-opacity));
+}
+
 	@media (min-width: 640px) {
 
 	.sm\:static {
@@ -3767,6 +3868,14 @@ video {
 		overflow-x: visible;
 	}
 
+	.md\:rounded {
+		border-radius: 0.25rem;
+	}
+
+	.md\:border {
+		border-width: 1px;
+	}
+
 	.md\:border-t {
 		border-top-width: 1px;
 	}
@@ -3780,6 +3889,11 @@ video {
 		border-color: rgba(var(--color-300), var(--tw-border-opacity));
 	}
 
+	.md\:bg-gray-300 {
+		--tw-bg-opacity: 1;
+		background-color: rgba(var(--color-300), var(--tw-bg-opacity));
+	}
+
 	.md\:bg-gray-200 {
 		--tw-bg-opacity: 1;
 		background-color: rgba(var(--color-200), var(--tw-bg-opacity));
@@ -3789,10 +3903,23 @@ video {
 		background-color: transparent;
 	}
 
+	.md\:bg-gray-100 {
+		--tw-bg-opacity: 1;
+		background-color: rgba(var(--color-100), var(--tw-bg-opacity));
+	}
+
 	.md\:p-0 {
 		padding: 0px;
 	}
 
+	.md\:p-2\.5 {
+		padding: 0.625rem;
+	}
+
+	.md\:p-2 {
+		padding: 0.5rem;
+	}
+
 	.md\:p-3 {
 		padding: 0.75rem;
 	}
@@ -3817,6 +3944,11 @@ video {
 		padding-bottom: 12rem;
 	}
 
+	.md\:px-5 {
+		padding-left: 1.25rem;
+		padding-right: 1.25rem;
+	}
+
 	.md\:px-3 {
 		padding-left: 0.75rem;
 		padding-right: 0.75rem;
@@ -3842,6 +3974,10 @@ video {
 		padding-left: 1.25rem;
 	}
 
+	.md\:pt-1 {
+		padding-top: 0.25rem;
+	}
+
 	.md\:text-xl {
 		font-size: 1.25rem;
 		line-height: 1.75rem;
diff --git a/files/static/src/main.css b/files/static/src/main.css
index df1aca77c..8d1f5dd6e 100644
--- a/files/static/src/main.css
+++ b/files/static/src/main.css
@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+.theme-mountain-bluebird {
+	--color-primary: 0,132,180;
+	--color-100: 255,255,255;
+	--color-200: 255,255,255;
+	--color-300: 232,232,232;
+	--color-400: 180,180,180;
+	--color-500: 153,153,153;
+	--color-600: 51,51,51;
+	--color-700: 37,37,37;
+	--color-800: 37,37,37;
+	--color-900: 0,0,0;
+}
+
 .theme-blood-orange {
 	--color-primary: 249,115,22;
 	--color-100: 224,231,255;
@@ -81,7 +94,7 @@
 }
 
 .theme-choco-mint {
-	--color-primary: 37, 193, 136;
+	--color-primary: 37,193,136;
 	--color-100: 246,246,244;
 	--color-200: 235,232,229;
 	--color-300: 219,218,209;
@@ -93,6 +106,32 @@
 	--color-900: 40,37,17;
 }
 
+.theme-redwood {
+	--color-primary: 222,176,16;
+	--color-100: 246,244,244;
+	--color-200: 235,229,229;
+	--color-300: 219,209,209;
+	--color-400: 177,159,159;
+	--color-500: 130,110,110;
+	--color-600: 99,96,77;
+	--color-700: 70,47,47;
+	--color-800: 52,32,32;
+	--color-900: 40,17,17;
+}
+
+.theme-sequoia {
+	--color-primary: 54,83,20;
+	--color-100: 246,244,244;
+	--color-200: 235,229,229;
+	--color-300: 219,209,209;
+	--color-400: 177,159,159;
+	--color-500: 130,110,110;
+	--color-600: 99,96,77;
+	--color-700: 70,47,47;
+	--color-800: 52,32,32;
+	--color-900: 40,17,17;
+}
+
 .theme-dramblr {
 	--color-primary: 2,132,199;
 	--color-100: 241,245,249;
@@ -374,6 +413,14 @@
 		@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;
diff --git a/files/templates/CHRISTMAS/comments.html b/files/templates/CHRISTMAS/comments.html
index 6b499a561..ba3473822 100644
--- a/files/templates/CHRISTMAS/comments.html
+++ b/files/templates/CHRISTMAS/comments.html
@@ -170,7 +170,7 @@
 </div>
 {% endif %}
 
-<div id="comment-{{c.id}}" class="comment anchor {% if c.unread %}bg-primary/20{% endif %} relative flex mt-4 md:mt-6 {% if standalone and level==1 %} mt-0{% endif %}{% if c.collapse_for_user(v) or (standalone and c.over_18 and not (v and v.over_18)) %} collapsed items-center opacity-50 md:hover:opacity-100{% endif %}">
+<div id="comment-{{c.id}}" class="comment anchor {% if c.unread %}bg-primary/20{% endif %} relative flex mt-4 md:mt-6 {% if standalone and level==1 %} mt-0{% endif %}{% if c.collapse_for_user(v) or (standalone and c.over_18 and not (v and v.over_18)) %} collapsed items-center opacity-50 md:hover:opacity-100{% endif %} {% if c.sentto != None and level==1 %}p-2.5 bg-gray-200 md:bg-gray-300 dark:bg-white/[.05] rounded{% endif %}">
 
 	{% if c.collapse_for_user(v) or (standalone and c.over_18 and not (v and v.over_18)) %}
 	<div id="comment-collapse-{{c.id}}" class="z-20 absolute w-full h-full bottom-0 left-0 right-0 top-0 cursor-pointer" onclick="collapse_comment('{{c.id}}')"></div>
@@ -180,6 +180,7 @@
 
 	<span class="comment-collapse-desktop hidden" {% if not c.unread %}style="border-left: 2px solid #{{c.author.namecolor}};"{% endif %} onclick="collapse_comment('{{c.id}}')"></span>
 
+	{% if c.sentto == None %}
 	<div class="flex flex-col flex-shrink-0 items-center mr-2.5 {{ 'md:mr-4' if not c.parent_comment_id or standalone else 'md:mr-3' }}">
 		<button class="relative {{ 'santa' if c.author.patron else 'cap' }}" onclick="collapse_comment('{{c.id}}')">
 			{% if standalone or level==1 %}
@@ -190,6 +191,7 @@
 		</button>
 		<button onclick="collapse_comment('{{c.id}}')" class="invisible-on-collapse md:ml-4 w-[1px] md:w-4 h-full border-l border-gray-400 dark:border-gray-600"></button>
 	</div>
+	{% endif %}
 
 	<div class="w-full">
 
@@ -316,7 +318,7 @@
 				<div id="comment-banned-warning" class="hidden-on-collapse text-red-600 mb-0">Removed by @{{c.ban_reason}}</div>
 			{% endif %}
 
-			<div id="comment-text-{{c.id}}" class="comment-text hidden-on-collapse mt-2 break-words {% if c.award_count("candycane") %}candycane{% endif %}">
+			<div id="comment-text-{{c.id}}" class="comment-text hidden-on-collapse mt-2 break-words {% if c.award_count("candycane") %}candycane{% endif %} {% if c.sentto != None and v.id==c.author_id %}text-green-700 dark:text-green-400{% endif %}">
 				{{c.realbody(v) | safe}}
 				{% if c.options %}
 					{% for o in c.options %}
diff --git a/files/templates/CHRISTMAS/comments/CommentActions.html b/files/templates/CHRISTMAS/comments/CommentActions.html
index 5359a9f1b..271da07fa 100644
--- a/files/templates/CHRISTMAS/comments/CommentActions.html
+++ b/files/templates/CHRISTMAS/comments/CommentActions.html
@@ -37,46 +37,46 @@
 	{% if v %}
 	<li>
 		<button onclick="openReplyBox('{{c.id}}')">
-			<i class="fas fa-reply fa-fw mr-2"></i>Reply
+			<i class="fas fa-reply fa-fw mr-1"></i>Reply
 		</button>
 	</li>
 	<li class="list-inline-item text-muted hidden md:block">
 		<button href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#awardModal" onclick="awardModal('/comment/{{c.id}}/awards')">
-			<i class="fas fa-gift fa-fw mr-2" aria-hidden="true"></i>Award
+			<i class="fas fa-gift fa-fw mr-1" aria-hidden="true"></i>Award
 		</button>
 	</li>
 	<li id="unsave-{{c.id}}" class="hidden {% if c.id in v.saved_comment_idlist() %}md:block{% endif %}">
 		<button class="hover:text-gray-400" onclick="post_toast3('/unsave_comment/{{c.id}}','save-{{c.id}}','unsave-{{c.id}}')">
-			<i class="fas fa-bookmark fa-fw mr-2"></i>Unsave
+			<i class="fas fa-bookmark fa-fw mr-1"></i>Unsave
 		</button>
 	</li>
 	<li id="save-{{c.id}}" class="hidden {% if c.id not in v.saved_comment_idlist() %}md:block{% endif %}">
 		<button class="hover:text-gray-400" onclick="post_toast3('/save_comment/{{c.id}}','save-{{c.id}}','unsave-{{c.id}}')">
-			<i class="far fa-bookmark fa-fw mr-2"></i>Save
+			<i class="far fa-bookmark fa-fw mr-1"></i>Save
 		</button>
 	</li>
 	{% endif %}
 
 	<li class="hidden md:block">
 		<button class="copy-link hover:text-gray-400" data-clipboard-text="{% if 'rama' in request.host %}https://freeghettohoes.biz{{c.permalink}}{% else %}{{c.permalink | full_link}}{% endif %}">
-			<i class="fas fa-link fa-fw mr-2"></i>Copy link
+			<i class="fas fa-link fa-fw mr-1"></i>Copy link
 		</button>
 	</li>
 	<li class="hidden md:block">
 		<a href="{{c.permalink}}" class="text-gray-500 hover:text-gray-400">
-			<i class="fas fa-book-open fa-fw mr-2"></i>Context
+			<i class="fas fa-book-open fa-fw mr-1"></i>Context
 		</a>
 	</li>
 	<li class="hidden md:block">
 		<a href="/votes?link={{c.fullname}}" class="text-gray-500 hover:text-gray-400">
-			<i class="fas fa-poll fa-fw mr-2"></i>Votes
+			<i class="fas fa-poll fa-fw mr-1"></i>Votes
 		</a>
 	</li>
 
 	{% if v and c.parent_submission and c.author_id==v.id %}
 	<li>
 		<button class="hover:text-gray-400" onclick="toggleEdit('{{c.id}}')">
-			<i class="fas fa-pencil fa-fw mr-2"></i>Edit
+			<i class="fas fa-pencil fa-fw mr-1"></i>Edit
 		</button>
 	</li>
 	{% endif %}
@@ -230,7 +230,7 @@
 
 	<li class="block md:hidden">
 		<button data-bs-toggle="modal" data-bs-target="#actionsModal-{{c.id}}" data-bs-focus="false">
-			<i class="fas fa-ellipsis-h fa-fw mr-2"></i>
+			<i class="fas fa-ellipsis-h fa-fw mr-1"></i>
 		</button>
 	</li>
 	{% if v and request.path.startswith('/@') and v.admin_level == 0 %}
diff --git a/files/templates/CHRISTMAS/default.html b/files/templates/CHRISTMAS/default.html
index ccc9551ad..6b4e8b87e 100644
--- a/files/templates/CHRISTMAS/default.html
+++ b/files/templates/CHRISTMAS/default.html
@@ -192,7 +192,7 @@
 
 		{% block stylesheets %}
 
-		<link rel="stylesheet" href="/assets/CHRISTMAS/css/main.css?v=440">
+		<link rel="stylesheet" href="/assets/CHRISTMAS/css/main.css?v=441">
 
       	<link rel="stylesheet" href="/static/dist/main.css?v=452">
 
diff --git a/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html b/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html
index 809825252..ccc824f84 100644
--- a/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html
+++ b/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html
@@ -1,5 +1,5 @@
 <div class="dropdown">
-	<button class="relative flex items-center px-3 py-2.5 rounded text-sm text-gray-500 leading-normal hover:text-gray-400 focus:text-gray-200 focus:font-bold focus:text-shadow focus:outline-none" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<button class="relative flex items-center px-3 py-2.5 rounded text-sm leading-normal text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400 focus:text-gray-300 dark:focus:text-gray-400 focus:font-bold focus:text-shadow focus:outline-none" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fas fa-angle-double-down fa-fw fa-lg mr-2"></i>
 		More
 	</button>
diff --git a/files/templates/CHRISTMAS/footer.html b/files/templates/CHRISTMAS/footer.html
index 125fdeb67..1783ebe69 100644
--- a/files/templates/CHRISTMAS/footer.html
+++ b/files/templates/CHRISTMAS/footer.html
@@ -2,7 +2,7 @@
 	<div class="relative w-full max-w-screen-2xl mx-auto flex flex-col py-4 items-start bg-gray-800 rounded-t lights">
 		<div class="grid grid-cols-4 divide-x divide-gray-900">
 			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
-				<h2 class="font-bold text-gray-500 text-xl font-heading leading-normal mb-2">
+				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
 					Noteworthy Threads
 				</h2>
 				<ul class="flex flex-col mb-0">
@@ -35,7 +35,7 @@
 				</ul>
 			</div>
 			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
-				<h2 class="font-bold text-gray-500 text-xl font-heading leading-normal mb-2">
+				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
 					Quote of the Week
 				</h2>
 				<div class="flex flex-col gap-2">
@@ -55,7 +55,7 @@
 				</div>
 			</div>
 			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
-				<h2 class="font-bold text-gray-500 text-xl font-heading leading-normal mb-2">
+				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
 					Newest Members
 				</h2>
 				<ul class="hidden flex-wrap gap-x-3 gap-y-2 mb-3">
@@ -79,7 +79,7 @@
 				{% endif %}
 			</div>
 			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
-				<h2 class="font-bold text-gray-500 text-xl font-heading leading-normal mb-2">
+				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
 					rdrama
 				</h2>
 				<p class="mt-1 text-xs text-gray-500">
diff --git a/files/templates/CHRISTMAS/header-tw.html b/files/templates/CHRISTMAS/header-tw.html
index 2f664de2e..22774c02c 100644
--- a/files/templates/CHRISTMAS/header-tw.html
+++ b/files/templates/CHRISTMAS/header-tw.html
@@ -47,17 +47,17 @@
         </div>
         <div class="hidden lg:flex items-center sm:ml-4">
             <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-            <a href="/" class="relative px-3 py-2.5 rounded text-sm leading-normal {{ 'text-gray-200 font-bold text-shadow' if request.path == '/' else 'text-gray-500 hover:text-gray-400' }}" aria-current="page">
+            <a href="/" class="relative px-3 py-2.5 rounded text-sm leading-normal {{ 'text-gray-200 font-bold text-shadow' if request.path == '/' else 'text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400' }}" aria-current="page">
               <i class="fas fa-home-lg-alt fa-fw mr-2"></i>
               Home
             </a>
 
-            <a href="/comments" class="relative px-3 py-2.5 rounded text-sm leading-normal {{ 'text-gray-200 font-bold text-shadow' if request.path == '/comments' else 'text-gray-500 hover:text-gray-400' }}" aria-current="page">
+            <a href="/comments" class="relative px-3 py-2.5 rounded text-sm leading-normal {{ 'text-gray-200 font-bold text-shadow' if request.path == '/comments' else 'text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400' }}" aria-current="page">
               <i class="fas fa-comments-alt fa-fw mr-2"></i>
               Comments
             </a>
 
-            <a href="/leaderboard" class="relative px-3 py-2.5 rounded text-sm leading-normal {{ 'text-gray-200 font-bold text-shadow' if request.path == '/leaderboard' else 'text-gray-500 hover:text-gray-400' }}" aria-current="page">
+            <a href="/leaderboard" class="relative px-3 py-2.5 rounded text-sm leading-normal {{ 'text-gray-200 font-bold text-shadow' if request.path == '/leaderboard' else 'text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400' }}" aria-current="page">
               <i class="fas fa-trophy fa-fw mr-2"></i>
               Leaderboard
             </a>
@@ -81,18 +81,18 @@
         </div>
         {% if v.admin_level > 1 %}
         <!-- Admin link -->
-        <a href="{{ '/admin' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="bg-transparent p-1 rounded-full text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+        <a href="{{ '/admin' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="bg-transparent p-1 rounded-full text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
           <span class="sr-only">Admin tools</span>
           <i class="fas fa-crown fa-fw"></i>
         </a>
         {% endif %}
         <!-- Profile link -->
-        <a href="{{ '/me' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="bg-transparent p-1 rounded-full text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+        <a href="{{ '/me' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="bg-transparent p-1 rounded-full text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
           <span class="sr-only">My profile</span>
           <i class="fas fa-user fa-fw"></i>
         </a>
         <!-- Notifications -->
-        <a href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}" class="block bg-transparent p-1 rounded-full text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+        <a href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}" class="block bg-transparent p-1 rounded-full text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
           <span class="sr-only">View notifications</span>
           <div class="relative">
             <i class="fas fa-envelope fa-fw"></i>
@@ -105,7 +105,7 @@
           </div>
         </a>
         <!-- Post Creation -->
-        <a href="{{ '/submit' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="bg-transparent p-1 rounded-full text-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+        <a href="{{ '/submit' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="bg-transparent p-1 rounded-full text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
           <span class="sr-only">Submit post</span>
           <i class="fas fa-plus fa-fw"></i>
         </a>
diff --git a/files/templates/CHRISTMAS/modals/ModalThemePicker.html b/files/templates/CHRISTMAS/modals/ModalThemePicker.html
index c9ec066a6..464024ae3 100644
--- a/files/templates/CHRISTMAS/modals/ModalThemePicker.html
+++ b/files/templates/CHRISTMAS/modals/ModalThemePicker.html
@@ -610,6 +610,126 @@
 							</div>
 						</label>
 					</div>
+					<!-- Mountain Bluebird -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-mountain-bluebird" type="radio" id="mountain-bluebird-theme" class="peer" onchange="changeTheme(['theme-mountain-bluebird']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-mountain-bluebird'%}checked{% endif %}>
+						<label for="mountain-bluebird-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#252525]">
+								<div class="h-3 w-full bg-[#252525]"></div>
+								<div class="h-4 w-full bg-[#e1e1e1]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#ffffff] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#0084b4]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#0084b4]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Mountain Bluebird</span>
+							</div>
+						</label>
+					</div>
+					<!-- Redwood -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-redwood dark" type="radio" id="redwood-theme" class="peer" onchange="changeTheme(['theme-redwood','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-redwood dark'%}checked{% endif %}>
+						<label for="redwood-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#462f2f]">
+								<div class="h-3 w-full bg-[#462f2f]"></div>
+								<div class="h-4 w-full bg-[#342020]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#342020] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#deb010]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#deb010]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Redwood</span>
+							</div>
+						</label>
+					</div>
+					<!-- Conifer -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-evergreen dark" type="radio" id="evergreen-theme-dark" class="peer" onchange="changeTheme(['theme-evergreen','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-evergreen dark'%}checked{% endif %}>
+						<label for="evergreen-theme-dark" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#37523e]">
+								<div class="h-3 w-full bg-[#37523e]"></div>
+								<div class="h-4 w-full bg-[#1f3726]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#1f3726] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#dc2626]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#dc2626]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Conifer</span>
+							</div>
+						</label>
+					</div>
+					<!-- Sequoia -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-sequoia" type="radio" id="sequoia-theme" class="peer" onchange="changeTheme(['theme-sequoia']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-sequoia'%}checked{% endif %}>
+						<label for="sequoia-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#462f2f]">
+								<div class="h-3 w-full bg-[#462f2f]"></div>
+								<div class="h-4 w-full bg-[#dbd1d1]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#ebe5e5] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#365314]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#365314]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Sequoia</span>
+							</div>
+						</label>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/files/templates/CHRISTMAS/notifications.html b/files/templates/CHRISTMAS/notifications.html
index 7674994b6..0c9720bbd 100644
--- a/files/templates/CHRISTMAS/notifications.html
+++ b/files/templates/CHRISTMAS/notifications.html
@@ -41,8 +41,8 @@
 				</ul>
 			</div>
 			<div class="ml-auto">
-				<button class="block px-4 py-2 bg-gradient-to-t from-gray-800 to-gray-700 focus:from-gray-700 focus:to-gray-800 border border-gray-900 rounded-md text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:shadow-inner focus:outline-none" onclick="post_toast('/clear')">
-					<i class="fas fa-check-double text-gray-500 fa-sm fa-fw mr-1"></i>
+				<button class="btn btn-green" onclick="post_toast('/clear')">
+					<i class="fas fa-check-double fa-sm fa-fw mr-1"></i>
 					Mark all as read
 				</button>
 			</div>
diff --git a/files/templates/CHRISTMAS/settings.html b/files/templates/CHRISTMAS/settings.html
index a6f60227a..318b3821f 100644
--- a/files/templates/CHRISTMAS/settings.html
+++ b/files/templates/CHRISTMAS/settings.html
@@ -34,7 +34,7 @@
 
 	{% block stylesheets %}
 
-	<link rel="stylesheet" href="/assets/CHRISTMAS/css/main.css?v=440">
+	<link rel="stylesheet" href="/assets/CHRISTMAS/css/main.css?v=441">
 
   	<link rel="stylesheet" href="/static/dist/main.css?v=452">
 
diff --git a/files/templates/CHRISTMAS/sidebars/SubmissionSidebar.html b/files/templates/CHRISTMAS/sidebars/SubmissionSidebar.html
index 1eb836001..d3c52a8a9 100644
--- a/files/templates/CHRISTMAS/sidebars/SubmissionSidebar.html
+++ b/files/templates/CHRISTMAS/sidebars/SubmissionSidebar.html
@@ -6,7 +6,7 @@
 		<!-- Give awards if none -->
 		{% if not p.awards %}
 		<p class="text-sm text-gray-500">No awards gifted yet...</p>
-		<button class="text-sm text-red-600 hover:text-red-500" data-bs-toggle="modal" data-bs-target="#awardModal" onclick="awardModal('/post/{{p.id}}/awards')">
+		<button class="text-sm text-primary hover:underline" data-bs-toggle="modal" data-bs-target="#awardModal" onclick="awardModal('/post/{{p.id}}/awards')">
 				Gift award
 		</button>
 		{% endif %}
@@ -56,7 +56,7 @@
 			</li>
 			<li>
 				<p class="text-sm">
-					<a href="/votes?link={{p.fullname}}" class="font-bold text-red-600 hover:text-red-600">
+					<a href="/votes?link={{p.fullname}}" class="font-bold text-primary hover:underline">
 						{{ ups + downs }}
 					</a>
 					{{ 'vote' if ups + downs == 1 else 'votes' }} on this post
diff --git a/files/templates/CHRISTMAS/submission.html b/files/templates/CHRISTMAS/submission.html
index 9742ce5f4..d67b85859 100644
--- a/files/templates/CHRISTMAS/submission.html
+++ b/files/templates/CHRISTMAS/submission.html
@@ -157,8 +157,8 @@
 
 {% if p.active_flags %}
 	<!-- Reports -->
-	<div class="p-2.5 md:p-0">
-		<div id="flaggers-{{p.id}}" class="relative mt-4 p-3 rounded-lg bg-red-100 border border-red-200 hidden">
+	<div id="flaggers-{{p.id}}" class="mt-4 p-2.5 md:p-0 hidden">
+		<div class="relative p-3 rounded-lg bg-red-100 border border-red-200">
 			<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>
diff --git a/files/templates/CHRISTMAS/submission/SubmissionActions.html b/files/templates/CHRISTMAS/submission/SubmissionActions.html
index fa344203a..1b835dcba 100644
--- a/files/templates/CHRISTMAS/submission/SubmissionActions.html
+++ b/files/templates/CHRISTMAS/submission/SubmissionActions.html
@@ -11,7 +11,7 @@
 	{% if '/post/' not in request.full_path %}
 	<li>
 		<a {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %} class="text-gray-500 hover:text-gray-400">
-			<i class="fas fa-comment-dots fa-fw mr-2"></i>{{ p.comment_count }}
+			<i class="fas fa-comment-dots fa-fw mr-1"></i>{{ p.comment_count }}
 			<span class="hidden lg:inline-block">comment{{ '' if p.comment_count == 1 else 's' }}</span>
 			<span class="text-primary hidden new-comments"></span>
 		</a>
@@ -21,7 +21,7 @@
 	{% if '/post/' not in request.full_path  %}
 	<li>
 		<span>
-			<i class="fas fa-eye fa-fw mr-2"></i>{{ p.views }}
+			<i class="fas fa-eye fa-fw mr-1"></i>{{ p.views }}
 		</span>
 	</li>
 	{% endif %}
@@ -29,7 +29,7 @@
 	{% if v and (v.id==p.author_id or v.admin_level > 1 and v.admin_level > 2) and '/post/' in request.full_path %}
 	<li class="hidden md:inline-block">
 		<button class="hover:text-gray-400" onclick="togglePostEdit('{{p.id}}')">
-			<i class="fas fa-pencil fa-fw mr-2"></i>Edit
+			<i class="fas fa-pencil fa-fw mr-1"></i>Edit
 		</button>
 	</li>
 	{% endif %}
@@ -38,7 +38,7 @@
 	{% if p.private %}
 	<li class="hidden md:inline-block">
 		<button class="hover:text-gray-400" onclick="post_toast('/publish/{{p.id}}')">
-			<i class="fas fa-globe fa-fw mr-2"></i>Publish
+			<i class="fas fa-globe fa-fw mr-1"></i>Publish
 		</button>
 	</li>
 	{% endif %}
@@ -47,39 +47,39 @@
 	{% if v %}
 	<li class="hidden md:inline-block">
 		<button class="hover:text-gray-400" data-bs-toggle="modal" data-bs-target="#awardModal" onclick="awardModal('/post/{{p.id}}/awards')">
-			<i class="fas fa-gift fa-fw mr-2"></i>Award
+			<i class="fas fa-gift fa-fw mr-1"></i>Award
 		</button>
 	</li>
 	<li id="subscribe-{{p.id}}" class="{% if p.id in v.subscribed_idlist() %}hidden{% endif %}">
 		<button class="hover:text-gray-400" onclick="post_toast2('/subscribe/{{p.id}}','subscribe-{{p.id}}','unsubscribe-{{p.id}}')">
-			<i class="fas fa-bell fa-fw mr-2"></i>Subscribe
+			<i class="fas fa-bell fa-fw mr-1"></i>Subscribe
 		</button>
 	</li>
 	<li id="unsubscribe-{{p.id}}" class="{% if p.id not in v.subscribed_idlist() %}hidden{% endif %}">
 		<button class="hover:text-gray-400" onclick="post_toast2('/unsubscribe/{{p.id}}','subscribe-{{p.id}}','unsubscribe-{{p.id}}')">
-			<i class="fas fa-bell-slash fa-fw mr-2"></i>Unsubscribe
+			<i class="fas fa-bell-slash fa-fw mr-1"></i>Unsubscribe
 		</button>
 	</li>
 	<li id="save-{{p.id}}" class="{% if p.id in v.saved_idlist() %}hidden{% endif %}">
 		<button class="hover:text-gray-400" onclick="post_toast2('/save_post/{{p.id}}','save-{{p.id}}','unsave-{{p.id}}')">
-			<i class="far fa-bookmark fa-fw mr-2"></i>Save
+			<i class="far fa-bookmark fa-fw mr-1"></i>Save
 		</button>
 	</li>
 	<li id="unsave-{{p.id}}" class="{% if not p.id in v.saved_idlist() %}hidden{% endif %}">
 		<button class="hover:text-gray-400" onclick="post_toast2('/unsave_post/{{p.id}}','save-{{p.id}}','unsave-{{p.id}}')">
-			<i class="fas fa-bookmark fa-fw mr-2"></i>Unsave
+			<i class="fas fa-bookmark fa-fw mr-1"></i>Unsave
 		</button>
 	</li>
 	{% endif %}
 	<!-- Does not require auth -->
 	<li class="hidden md:inline-block">
 		<a href="/votes?link={{p.fullname}}" class="text-gray-500 hover:text-gray-400">
-			<i class="fas fa-poll fa-fw mr-2"></i>Votes
+			<i class="fas fa-poll fa-fw mr-1"></i>Votes
 		</a>
 	</li>
 	<li class="hidden md:inline-block">
 		<button class="copy-link hover:text-gray-400" data-clipboard-text="{% if 'rama' in request.host %}https://freeghettohoes.biz{{p.permalink}}{% else %}{{p.permalink | full_link}}{% endif %}">
-			<i class="fas fa-link fa-fw mr-2"></i>Copy link
+			<i class="fas fa-link fa-fw mr-1"></i>Copy link
 		</button>
 	</li>
 	<li class="hidden md:inline-block">
diff --git a/files/templates/CHRISTMAS/submit.html b/files/templates/CHRISTMAS/submit.html
index 3d72da9dc..0c6fb2e8e 100644
--- a/files/templates/CHRISTMAS/submit.html
+++ b/files/templates/CHRISTMAS/submit.html
@@ -5,23 +5,23 @@
 {% extends "CHRISTMAS/default.html" %}
 
 {% block subHeader %}
-	<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
-		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
-		<div class="relative col-span-full flex items-center">
-			<div>
-				<h1 class="font-bold text-xl font-heading leading-normal mb-0">
-					Create post
-				</h1>
-				<small class="block text-gray-700 dark:text-gray-400">
-					Share drama with the community.
-				</small>
-			</div>
-			<div class="ml-auto">
-				{% if error %}<span class="text-danger mr-2">{{error}}</span>{% endif %}
-				<button class="btn btn-primary" id="create_button" type="submit" form="submitform" disabled>Post</button>
-			</div>
+<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
+	<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
+	<div class="relative col-span-full flex items-center">
+		<div>
+			<h1 class="font-bold text-xl font-heading leading-normal mb-0">
+				Create post
+			</h1>
+			<small class="block text-gray-700 dark:text-gray-400">
+				Share drama with the community.
+			</small>
+		</div>
+		<div class="ml-auto">
+			{% if error %}<span class="text-danger mr-2">{{error}}</span>{% endif %}
+			<button class="btn btn-primary" id="create_button" type="submit" form="submitform" disabled>Post</button>
 		</div>
 	</div>
+</div>
 {% endblock %}
 
 {% block content %}
@@ -92,44 +92,58 @@
 				Post
 				<span class="italic text-sm font-normal text-gray-500">(optional if you have a link)</span>
 			</label>
-			<!-- Input field -->
-			<div class="relative rounded border border-gray-300 dark:border-gray-900 bg-gray-100 dark:bg-white/[.05] w-full">
-				<textarea form="submitform" id="post-text" class="rounded-t bg-transparent p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown('post-text','preview');charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required></textarea>
-				<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 dark:border-white/[.05] mb-0">
-					<li>
-						<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('post-text')">
-							<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('post-text')">
-							<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('post-text')">
-							<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>
-					<li>
-						<button type="button" class="text-gray-400 hover:text-gray-500" onclick="commentForm('post-text');getGif()">
-							<span class="font-bold text-sm text-uppercase" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</span>
-						</button>
-					</li>
-					<li>
-						<button type="button" class="text-gray-400 hover:text-gray-500" onclick="loadEmojis('post-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji"><i class="fas fa-smile-beam fa-fw fa-sm"></i>
-						</button>
-					</li>
-				</ul>
-				<span class="absolute right-3 bottom-3 z-10 text-xs font-medium text-gray-500" id="character-count-submit-text-form"></span>
+			<div class="md:bg-gray-100 dark:md:bg-transparent md:border border-gray-300 dark:border-gray-900 md:rounded">
+				<nav class="px-2 md:px-5 md:pt-1">
+					<div class="nav nav-tabs" id="nav-tab" role="tablist">
+						<button class="nav-link active" id="nav-write-tab" data-bs-toggle="tab" data-bs-target="#nav-write" type="button" role="tab" aria-controls="nav-write" aria-selected="true">Write</button>
+						<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-preview" type="button" role="tab" aria-controls="nav-preview" aria-selected="false">Preview</button>
+					</div>
+				</nav>
+				<div class="tab-content md:p-2.5 md:pt-0" id="nav-tabContent">
+					<div class="tab-pane fade show active" id="nav-write" role="tabpanel" aria-labelledby="nav-write-tab">
+						<!-- Input field -->
+						<div class="relative rounded border border-gray-300 dark:border-gray-900 bg-white dark:bg-white/[.05] w-full">
+							<textarea form="submitform" id="post-text" class="rounded-t bg-transparent p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown('post-text','preview');charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required></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('post-text')">
+										<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('post-text')">
+										<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('post-text')">
+										<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>
+								<li>
+									<button type="button" class="text-gray-400 hover:text-gray-500" onclick="commentForm('post-text');getGif()">
+										<span class="font-bold text-sm text-uppercase" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</span>
+									</button>
+								</li>
+								<li>
+									<button type="button" class="text-gray-400 hover:text-gray-500" onclick="loadEmojis('post-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji"><i class="fas fa-smile-beam fa-fw fa-sm"></i>
+									</button>
+								</li>
+							</ul>
+							<span class="absolute right-3 bottom-3 z-10 text-xs font-medium text-gray-500" id="character-count-submit-text-form"></span>
+						</div>
+					</div>
+					<div class="tab-pane fade" id="nav-preview" role="tabpanel" aria-labelledby="nav-preview-tab">
+						<div id="preview" class="border border-transparent p-2" style="min-height: 242px;"></div>
+					</div>
+					<a href="/formatting" target="_blank" class="block mt-2.5 text-xs text-gray-500 hover:text-gray-400">Formatting help</a>
+				</div>
 			</div>
-			<a href="/formatting" target="_blank" class="block mt-2 text-xs text-gray-500 hover:text-gray-400">Formatting help</a>
 		</div>
 
 		<!-- <div class="btn btn-secondary" onclick="document.getElementById('preview').classList.toggle('d-none');" style="float: right;">
 			Toggle preview
 		</div> -->
-		<div id="preview" class="hidden my-3"></div>
 
 		<!-- User form key (required) -->
 		<input type="hidden" name="formkey" value="{{v.formkey}}" class="hidden">
@@ -154,17 +168,17 @@
 {% endblock %}
 
 {% block sidebar %}
-	{% include 'CHRISTMAS//sidebars/SubmitSidebar.html' %}
+{% include 'CHRISTMAS//sidebars/SubmitSidebar.html' %}
 {% endblock %}
 
 {% block modals %}
-	{% include "CHRISTMAS/emoji_modal.html" %}
-	{% include "CHRISTMAS/gif_modal.html" %}
-	{% include 'CHRISTMAS//awards/Christmas/Snow.html' %}
+{% include "CHRISTMAS/emoji_modal.html" %}
+{% include "CHRISTMAS/gif_modal.html" %}
+{% include 'CHRISTMAS//awards/Christmas/Snow.html' %}
 {% endblock %}
 
 {% block scripts %}
-	<script defer src="/assets/CHRISTMAS/js/marked.js?v=202"></script>
-	<script defer src="/assets/CHRISTMAS/js/submit.js?v=201"></script>
-	<script defer src="/assets/CHRISTMAS/js/christmas/snow.js?v=200"></script>
+<script defer src="/assets/CHRISTMAS/js/marked.js?v=202"></script>
+<script defer src="/assets/CHRISTMAS/js/submit.js?v=201"></script>
+<script defer src="/assets/CHRISTMAS/js/christmas/snow.js?v=200"></script>
 {% endblock %}