diff --git a/files/static/dist/main.css b/files/static/dist/main.css
index b4375d2643..8e660e0f4c 100644
--- a/files/static/dist/main.css
+++ b/files/static/dist/main.css
@@ -1056,6 +1056,12 @@ video {
 .mt-\[-1px\] {
 	margin-top: -1px;
 }
+.-mr-2 {
+	margin-right: -0.5rem;
+}
+.-mr-4 {
+	margin-right: -1rem;
+}
 .-ml-5 {
 	margin-left: -1.25rem;
 }
@@ -1143,6 +1149,9 @@ video {
 .h-10 {
 	height: 2.5rem;
 }
+.h-7 {
+	height: 1.75rem;
+}
 .h-4 {
 	height: 1rem;
 }
@@ -1179,9 +1188,6 @@ video {
 .h-2 {
 	height: 0.5rem;
 }
-.h-7 {
-	height: 1.75rem;
-}
 .max-h-0 {
 	max-height: 0px;
 }
@@ -1221,6 +1227,9 @@ video {
 .w-10 {
 	width: 2.5rem;
 }
+.w-7 {
+	width: 1.75rem;
+}
 .w-6 {
 	width: 1.5rem;
 }
@@ -1260,9 +1269,6 @@ video {
 .w-1\/4 {
 	width: 25%;
 }
-.w-7 {
-	width: 1.75rem;
-}
 .w-44 {
 	width: 11rem;
 }
@@ -1413,16 +1419,16 @@ video {
 	margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
 	margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
-	--tw-space-x-reverse: 0;
-	margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-	margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
-}
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
 	--tw-space-y-reverse: 0;
 	margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
 	margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+	--tw-space-x-reverse: 0;
+	margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+	margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
 	--tw-space-y-reverse: 0;
 	margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2397,6 +2403,9 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(245, 158, 11, var(--tw-text-opacity));
 }
+.text-white\/50 {
+	color: rgba(255, 255, 255, 0.5);
+}
 .text-gray-900 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-900), var(--tw-text-opacity));
@@ -2472,9 +2481,6 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(219, 39, 119, var(--tw-text-opacity));
 }
-.text-white\/50 {
-	color: rgba(255, 255, 255, 0.5);
-}
 .text-\[\#155e75\] {
 	--tw-text-opacity: 1;
 	color: rgba(21, 94, 117, var(--tw-text-opacity));
@@ -3482,6 +3488,11 @@ img.emoji-lg {
 	color: rgba(251, 191, 36, var(--tw-text-opacity));
 }
 
+.hover\:text-gray-100:hover {
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-100), var(--tw-text-opacity));
+}
+
 .hover\:text-green-700:hover {
 	--tw-text-opacity: 1;
 	color: rgba(21, 128, 61, var(--tw-text-opacity));
@@ -3636,10 +3647,6 @@ img.emoji-lg {
 	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));
@@ -3781,6 +3788,10 @@ img.emoji-lg {
 	background-color: rgba(255, 255, 255, .05);
 }
 
+.dark .dark\:bg-white\/\[\.06\] {
+	background-color: rgba(255, 255, 255, .06);
+}
+
 .dark .dark\:bg-white\/10 {
 	background-color: rgba(255, 255, 255, 0.1);
 }
@@ -3910,6 +3921,14 @@ img.emoji-lg {
 		margin-left: 1rem;
 	}
 
+	.sm\:mr-0 {
+		margin-right: 0px;
+	}
+
+	.sm\:mb-4 {
+		margin-bottom: 1rem;
+	}
+
 	.sm\:block {
 		display: block;
 	}
@@ -4063,8 +4082,8 @@ img.emoji-lg {
 		width: 11rem;
 	}
 
-	.md\:w-32 {
-		width: 8rem;
+	.md\:w-28 {
+		width: 7rem;
 	}
 
 	.md\:w-64 {
@@ -4251,14 +4270,18 @@ img.emoji-lg {
 		padding-left: 0px;
 	}
 
-	.md\:pb-4 {
-		padding-bottom: 1rem;
+	.md\:pb-3\.5 {
+		padding-bottom: 0.875rem;
 	}
 
 	.md\:pt-0 {
 		padding-top: 0px;
 	}
 
+	.md\:pb-3 {
+		padding-bottom: 0.75rem;
+	}
+
 	.md\:pl-5 {
 		padding-left: 1.25rem;
 	}
@@ -4373,6 +4396,10 @@ img.emoji-lg {
 		display: block;
 	}
 
+	.xl\:inline-block {
+		display: inline-block;
+	}
+
 	.xl\:flex {
 		display: flex;
 	}
diff --git a/files/templates/CHRISTMAS/banner.html b/files/templates/CHRISTMAS/banner.html
index c16679e34d..49f5c93a8b 100644
--- a/files/templates/CHRISTMAS/banner.html
+++ b/files/templates/CHRISTMAS/banner.html
@@ -3,7 +3,7 @@
   <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: <strong>/r/SubredditDrama official site.</strong>&nbsp;
-      <span class="font-medium hidden md:inline-block">
+      <span class="font-medium hidden lg: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>
diff --git a/files/templates/CHRISTMAS/default.html b/files/templates/CHRISTMAS/default.html
index 1d4f064fef..41289677bf 100644
--- a/files/templates/CHRISTMAS/default.html
+++ b/files/templates/CHRISTMAS/default.html
@@ -194,7 +194,7 @@
 
 		<link rel="stylesheet" href="/static/assets/CHRISTMAS/css/main.css?a=10">
 
-      	<link rel="stylesheet" href="/static/dist/main.css?a=10">
+      	<link rel="stylesheet" href="/static/dist/main.css?a=11">
 
 		{% if v %}
 			<style>:root{--primary:#dc2626}</style>
@@ -357,7 +357,7 @@
 		}
 	</script>
 {% endif %}
-	<script src="/static/assets/CHRISTMAS/js/default.js?a=37"></script>
+	<script src="/static/assets/CHRISTMAS/js/default.js?a=39"></script>
 
 </body>
 </html>
diff --git a/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html b/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html
index 6da0efc0cb..2f9a94a296 100644
--- a/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html
+++ b/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html
@@ -1,5 +1,5 @@
 <div class="dropdown">
-	<button class="relative flex items-center px-3 py-2.5 rounded text-sm text-gray-100 hover:text-gray-400 focus:text-gray-200 focus:outline-none dropdown-toggle" type="button" id="dropdownProfileMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<button class="relative flex items-center px-3 py-2.5 rounded text-sm text-gray-100 hover:text-gray-400 focus:text-gray-200 focus:outline-none dropdown-toggle" type="button" id="dropdownProfileMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-offset="0,-2">
 		<span class="sr-only">Open user menu</span>
 		<img class="h-9 w-9 bg-white p-[3px] border border-gray-800" src="{{ v.profile_url }}" alt="Your avatar"/>
 		<div class="pl-2 text-left">
diff --git a/files/templates/CHRISTMAS/header-tw.html b/files/templates/CHRISTMAS/header-tw.html
index 82e1122557..a16f29b6ec 100644
--- a/files/templates/CHRISTMAS/header-tw.html
+++ b/files/templates/CHRISTMAS/header-tw.html
@@ -4,11 +4,100 @@
   {% include "CHRISTMAS/banner.html" %}
   <!-- Navigation bar -->
   <div class="w-full max-w-screen-2xl mx-auto grid grid-cols-12 px-4">
-    <div class="relative col-span-full flex items-center justify-between h-14 px-4">
+    <div class="relative col-span-full flex items-center justify-between h-14 md:px-4">
+      <div class="flex-1 flex items-center sm:items-stretch sm:justify-start">
+        <div class="flex-shrink-0 flex items-center">
+          <a class="flex items-center" href="{{ '/' if v else '/logged_out'}}">
+            <img class="block lg:hidden h-7 w-7 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
+            <img class="hidden lg:block h-7 w-7 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
+            <span class="pl-2 text-white text-2xl font-bold">rdrama</span>
+          </a>
+        </div>
+        <div class="relative hidden sm:flex flex-shrink-0 items-center sm:ml-6">
+          <form action="/search/posts/" method="get" class="relative mb-0">
+            <input placeholder="Search" class="w-full text-gray-500 focus:text-black rounded border border-gray-800 bg-black/20 focus:bg-white hover:bg-black/30 shadow-inner w-full px-2 py-1.5 pr-7" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
+            <i class="fas fa-search text-gray-600 absolute top-3 right-2"></i>
+          </form>
+        </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-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-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="hidden xl:inline-block 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>
+            Leaderboards
+          </a>
+
+          {% include "CHRISTMAS/dropdowns/NavbarExtraLinks.html" %}
+
+          <a href="/shop" class="hidden xl:flex items-center relative px-3 py-2.5 rounded text-sm text-yellow-500 leading-normal {{ 'font-bold text-shadow' if request.path == '/shop' else 'font-medium' }}">
+            <img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="15px" height="12px" class="object-contain mr-2.5"/>
+            Shop
+          </a>
+
+        </div>
+      </div>
       {% if not error %}
-      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+      <div class="absolute inset-y-0 right-0 flex items-center space-x-2 sm:static sm:inset-auto -mr-2 sm:mr-0 sm:ml-6 sm:pr-0">
+        <!-- Logged in -->
+        {% if v %}
+        <!-- Profile dropdown -->
+        <div class="ml-3 relative hidden sm:block">
+          {% include "CHRISTMAS/dropdowns/NavbarProfile.html" %}
+        </div>
+        {% if v.admin_level > 1 %}
+        <!-- Admin link -->
+        <a href="{{ '/admin' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="inline-block bg-transparent p-2 rounded-full text-yellow-500 hover:text-yellow-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 text-lg sm:text-base"></i>
+        </a>
+        {% endif %}
+        <!-- Profile link -->
+        <a href="{{ '/me' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="hidden sm:inline-block bg-transparent p-2 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 text-lg sm:text-base"></i>
+        </a>
+        <!-- Notifications -->
+        <a href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}" class="inline-block bg-transparent p-2 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 text-lg sm:text-base"></i>
+            <!-- Counter -->
+            {% if v.notifications_count %}
+            <div class="absolute -top-1.5 -right-3 {{ 'w-10' if v.notifications_count > 99 else 'w-6' }} h-6 rounded-full border-2 border-gray-700 flex items-center justify-center bg-red-600">
+              <span class="text-xs text-gray-100 font-bold leading-none">{{ v.notifications_count }}</span>
+            </div>
+            {% endif %}
+          </div>
+        </a>
+        <!-- Post Creation -->
+        <a href="{{ '/submit' if v else '/signup?redirect={{request.path | urlencode}}' }}" class="inline-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">Submit post</span>
+          <i class="fas fa-pencil fa-fw text-lg sm:text-base"></i>
+        </a>
+        <!-- Not logged in -->
+        {% else %}
+        <!-- Login button -->
+        <a class="btn btn-gray" href="/login?redirect={{request.path | urlencode}}">
+          Login
+        </a>
+        <!-- Register button -->
+        <a class="hidden sm: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- hover:bg-gradient-to-t hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-200 hover:text-gray-700 focus:text-gray-900" href="/signup?redirect={{request.path | urlencode}}">
+          Sign up
+        </a>
+        {% endif %}
+
+        {% if not error %}
         <!-- Mobile menu button-->
-        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
+        <button type="button" class="sm:hidden bg-transparent p-2 rounded text-gray-400 hover:text-gray-300 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-opacity-50 focus:ring-white" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
           <span class="sr-only">Open main menu</span>
           <!--
             Icon when menu is closed.
@@ -17,7 +106,7 @@
 
             Menu open: "hidden", Menu closed: "block"
           -->
-          <svg class="block h-6 w-6" xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <svg class="block h-7 w-7" xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
           </svg>
           <!--
@@ -31,96 +120,6 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
-      </div>
-      {% endif %}
-      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-        <div class="flex-shrink-0 flex items-center">
-          <a class="flex items-center" href="{{ '/' if v else '/logged_out'}}">
-            <img class="block lg:hidden h-6 w-6 object-contain" style="margin-left: -21px;" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
-            <img class="hidden lg:block h-6 w-6 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
-            <span class="pl-2 text-white text-2xl font-bold">rdrama</span>
-          </a>
-        </div>
-        <div class="relative hidden sm:flex flex-shrink-0 items-center sm:ml-6">
-          <form action="/search/posts/" method="get" class="relative mb-0">
-            <input placeholder="Search" class="w-full text-gray-500 focus:text-black rounded border border-gray-800 bg-black/20 focus:bg-white hover:bg-black/30 shadow-inner w-full px-2 py-1.5 pr-7" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
-            <i class="fas fa-search text-gray-600 absolute top-3 right-2"></i>
-          </form>
-        </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-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-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-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>
-
-            {% include "CHRISTMAS/dropdowns/NavbarExtraLinks.html" %}
-
-            <a href="/shop" class="hidden xl:flex items-center relative px-3 py-2.5 rounded text-sm text-yellow-500 leading-normal {{ 'font-bold text-shadow' if request.path == '/shop' else 'font-medium' }}">
-              <img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="15px" height="12px" class="object-contain mr-2.5"/>
-              Shop
-            </a>
-
-        </div>
-      </div>
-      {% if not error %}
-      <div class="absolute inset-y-0 right-0 flex items-center space-x-3 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-        <!-- Logged in -->
-        {% if v %}
-        <!-- Profile dropdown -->
-        <div class="ml-3 relative hidden sm:block">
-          {% include "CHRISTMAS/dropdowns/NavbarProfile.html" %}
-        </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-yellow-500 hover:text-yellow-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-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-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>
-            <!-- Counter -->
-            {% if v.notifications_count %}
-            <div class="absolute -top-1.5 -right-3 {{ 'w-10' if v.notifications_count > 99 else 'w-6' }} h-6 rounded-full border-2 border-gray-700 flex items-center justify-center bg-red-600">
-              <span class="text-xs text-gray-100 font-bold leading-none">{{ v.notifications_count }}</span>
-            </div>
-            {% endif %}
-          </div>
-        </a>
-        <!-- Post Creation -->
-        <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>
-        <!-- Not logged in -->
-        {% else %}
-        <!-- Login button -->
-        <a class="btn btn-gray" href="/login?redirect={{request.path | urlencode}}">
-          Login
-        </a>
-        <!-- Register button -->
-        <a class="hidden sm: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- hover:bg-gradient-to-t hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-200 hover:text-gray-700 focus:text-gray-900" href="/signup?redirect={{request.path | urlencode}}">
-          Sign up
-        </a>
         {% endif %}
       </div>
       {% endif %}
@@ -128,14 +127,14 @@
   </div>
 
   <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="offcanvas offcanvas-start bg-gray-200" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
-    <div class="relative flex w-full bg-gray-700 h-20 px-4 items-center">
+  <div class="offcanvas offcanvas-end bg-gray-200 dark:bg-gray-800" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+    <div class="relative flex w-full bg-gray-700 dark:bg-gray-800 h-20 px-4 items-center">
       <a class="flex items-center" href="{{ '/' if v else '/logged_out'}}">
-          <img class="block lg:hidden h-6 w-6 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
-          <img class="hidden lg:block h-6 w-6 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
-          <span class="pl-2 text-white text-2xl font-bold">rdrama</span>
+        <img class="block lg:hidden h-7 w-7 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
+        <img class="hidden lg:block h-7 w-7 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
+        <span class="pl-2 text-white text-2xl font-bold">rdrama</span>
       </a>
-      <button type="button" class="ml-auto close p-2" data-bs-dismiss="offcanvas" aria-label="Close">
+      <button type="button" class="-mr-4 ml-auto text-white/50 text-2xl font-bold p-4" data-bs-dismiss="offcanvas" aria-label="Close">
         <span aria-hidden="true">
           <i class="far fa-times"></i>
         </span>
@@ -144,7 +143,7 @@
     <div class="offcanvas-body">
       <!-- Search box -->
       <form action="/search/posts/" method="get" class="relative mb-4">
-        <input placeholder="Search" class="block w-full rounded shadow-inner py-2 pl-2 pr-7 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
+        <input placeholder="Search" class="block w-full rounded shadow-inner py-2 pl-2 pr-7 bg-white dark:bg-white/[.06] border border-gray-300 dark:border-gray-900 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
         <i class="fas fa-search text-gray-400 absolute top-3 right-3"></i>
       </form>
       {% if v %}
@@ -154,19 +153,19 @@
         Create post
       </a>
       <!-- Meta links -->
-      <ul class="flex flex-col space-y-3 font-bold text-base text-gray-600">
+      <ul class="flex flex-col space-y-3 font-bold text-base text-gray-600 dark:text-gray-200">
         <li>
           <a class="inline-flex items-center" aria-current="page" href="/me">
-            <img src="{{ v.profile_url }}" class="w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover"/>
+            <img src="{{ v.profile_url }}" class="w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover"/>
             <div class="pl-3">
-              <div class="text-base text-black leading-5">
+              <div class="text-base text-black dark:text-gray-100 leading-5">
                 {{ v.username }}
               </div>
               <div class="flex space-x-3 mt-1">
                 <small class="flex items-center block mt-1 text-gray-500">
                   <img data-bs-toggle="tooltip" data-bs-placement="bottom" src="/assets/images/emojis/marseycoin.webp" data-bs-original-title="{{'COINS_NAME' | app_config}}" aria-label="{{'COINS_NAME' | app_config}}" class="w-6 h-6 object-contain" alt="coin icon"/>
                   <span class="pl-1">
-                      <span id="user-coins-amount">{{v.coins}}</span>
+                    <span id="user-coins-amount">{{v.coins}}</span>
                     {{'COINS_NAME' | app_config}}
                   </span>
                 </small>
@@ -181,13 +180,13 @@
           </a>
         </li>
         <li>
-          <a class="text-gray-700 hover:text-gray-900" href="/@me">
+          <a class="text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-400" href="/@me">
             <i class="fas fa-user fa-fw mr-2"></i>
             My Profile
           </a>
         </li>
         <li>
-          <a class="text-gray-700 hover:text-gray-900" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
+          <a class="text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-400" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
             <i class="fas fa-envelope fa-fw mr-2"></i>
             Inbox
             {% if v.notifications_count %}
@@ -196,43 +195,43 @@
           </a>
         </li>
         <li>
-          <a class="text-gray-700 hover:text-gray-900" href="/settings">
+          <a class="text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-400" href="/settings">
             <i class="fas fa-cog fa-fw mr-2"></i>
             Settings
           </a>
         </li>
         <li>
-          <button class="text-gray-700 hover:text-gray-900 font-bold" data-bs-toggle="modal" data-bs-target="#themePickerModal">
+          <button class="text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-400 font-bold" data-bs-toggle="modal" data-bs-target="#themePickerModal">
             <i class="fas fa-paint-brush fa-fw mr-2"></i>
             Pick theme
           </button>
-        <li>
-          <button class="text-gray-700 hover:text-gray-900 font-bold" onclick="post_toast('/logout', '1')">
-            <i class="fas fa-power-off fa-fw mr-2"></i>
-            Log out
-          </button>
-        </li>
-      </ul>
-      {% else %}
-      <ul class="flex flex-col space-y-2">
-        <li>
-          <a class="btn btn-gray w-full" href="/login?redirect={{request.path | urlencode}}">
-            Login
-          </a>
-        </li>
-        <li>
-          <a class="btn btn-gray w-full" href="/signup?redirect={{request.path | urlencode}}">
-            Signup
-          </a>
-        </li>
-      </ul>
-      {% endif %}
-      <a href="/static/assets/images/{{'SITE_NAME' | app_config}}/banners/{{range(1,95)|random()}}.webp?a=3" class="block w-full h-64 shadow-sm p-[3px] bg-white dark:bg-gray-900 overflow-hidden">
-        <img loading="lazy" class="w-full h-full flex-shrink-0 object-contain cursor-pointer" src="/static/assets/images/{{'SITE_NAME' | app_config}}/banners/{{range(1,95)|random()}}.webp?a=3" alt="artwork featuring an orange and white cat"/>
-      </a>
-      <small class="hidden mt-1 text-gray-500">
-        Artwork by <a href="/me" class="font-bold">@username</a>
-      </small>
+          <li>
+            <button class="text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-400 font-bold" onclick="post_toast('/logout', '1')">
+              <i class="fas fa-power-off fa-fw mr-2"></i>
+              Log out
+            </button>
+          </li>
+        </ul>
+        {% else %}
+        <ul class="flex flex-col space-y-2">
+          <li>
+            <a class="btn btn-gray w-full" href="/login?redirect={{request.path | urlencode}}">
+              Login
+            </a>
+          </li>
+          <li>
+            <a class="btn btn-gray w-full" href="/signup?redirect={{request.path | urlencode}}">
+              Signup
+            </a>
+          </li>
+        </ul>
+        {% endif %}
+        <a href="/static/assets/images/{{'SITE_NAME' | app_config}}/banners/{{range(1,95)|random()}}.webp?a=3" class="block w-full h-64 shadow-sm p-[3px] bg-white dark:bg-gray-900 overflow-hidden">
+          <img loading="lazy" class="w-full h-full flex-shrink-0 object-contain cursor-pointer" src="/static/assets/images/{{'SITE_NAME' | app_config}}/banners/{{range(1,95)|random()}}.webp?a=3" alt="artwork featuring an orange and white cat"/>
+        </a>
+        <small class="hidden mt-1 text-gray-500">
+          Artwork by <a href="/me" class="font-bold">@username</a>
+        </small>
+      </div>
     </div>
-  </div>
-</nav>
\ No newline at end of file
+  </nav>
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/home.html b/files/templates/CHRISTMAS/home.html
index f986457a25..5d5ab12960 100644
--- a/files/templates/CHRISTMAS/home.html
+++ b/files/templates/CHRISTMAS/home.html
@@ -33,21 +33,29 @@
 
 	{% if listing %}
 	<nav aria-label="Page navigation">
-		<ul class="pagination pagination-sm mb-0">
-			{% if page>1 %}
-			<li class="page-item">
-				<small><a class="page-link" href="?sort={{sort}}&page={{page-1}}&t={{t}}{% if only %}&only={{only}}{% endif %}" tabindex="-1">Prev</a></small>
+		<ul class="flex flex-wrap items-center mb-0 py-4 px-2.5 md:px-0">
+			<li>
+				{% if page > 1 %}
+				<small>
+					<a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="?sort={{sort}}&page={{page-1}}&t={{t}}{% if only %}&only={{only}}{% endif %}" tabindex="-1">
+						Back
+					</a>
+				</small>
+				{% else %}
+				<button disabled class="block px-2 py-1 text-sm font-bold text-gray-700 bg-gray-800 cursor-not-allowed">Back</button>
+				{% endif %}
 			</li>
-			{% else %}
-			<li class="page-item disabled"><span class="page-link">Prev</span></li>
-			{% endif %}
-			{% if next_exists %}
-			<li class="page-item">
-				<small><a class="page-link" href="?sort={{sort}}&page={{page+1}}&t={{t}}{% if only %}&only={{only}}{% endif %}">Next</a></small>
+			<li>
+				{% if next_exists %}
+				<small>
+					<a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="?sort={{sort}}&page={{page+1}}&t={{t}}{% if only %}&only={{only}}{% endif %}">
+						Next
+					</a>
+				</small>
+				{% else %}
+				<button disabled class="block px-2 py-1 text-sm font-bold text-gray-700 bg-gray-800 cursor-not-allowed">Next</button>
+				{% endif %}
 			</li>
-			{% else %}
-			<li class="page-item disabled"><span class="page-link">Next</span></li>
-			{% endif %}
 		</ul>
 	</nav>
 	{% endif %}
diff --git a/files/templates/CHRISTMAS/modals/ModalGiftCoins.html b/files/templates/CHRISTMAS/modals/ModalGiftCoins.html
index 3eeefd1f42..5b4e10b671 100644
--- a/files/templates/CHRISTMAS/modals/ModalGiftCoins.html
+++ b/files/templates/CHRISTMAS/modals/ModalGiftCoins.html
@@ -45,7 +45,7 @@
 				<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">
-						{{u.username}} will receive <strong id="coins-transfer-taxed">0</strong> {{'COINS_NAME' | app_config}}
+						Recipient will receive <strong id="coins-transfer-taxed">0</strong> coins
 					</p>
 				</div>
 			</div>
diff --git a/files/templates/CHRISTMAS/settings.html b/files/templates/CHRISTMAS/settings.html
index 7a9b3bf7ee..0bc02a4d4d 100644
--- a/files/templates/CHRISTMAS/settings.html
+++ b/files/templates/CHRISTMAS/settings.html
@@ -36,7 +36,7 @@
 
 	<link rel="stylesheet" href="/static/assets/CHRISTMAS/css/main.css?a=10">
 
-  	<link rel="stylesheet" href="/static/dist/main.css?a=10">
+  	<link rel="stylesheet" href="/static/dist/main.css?a=11">
 
 	{% if v %}
 		<style>:root{--primary:#{{v.themecolor}}}</style>
@@ -237,6 +237,6 @@
 
 	{% endif %}
 
-	<script src="/assets/CHRISTMAS/js/default.js?a=36"></script>
+	<script src="/assets/CHRISTMAS/js/default.js?a=39"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/files/templates/CHRISTMAS/submission.html b/files/templates/CHRISTMAS/submission.html
index 7a3da00987..edbfc8c37e 100644
--- a/files/templates/CHRISTMAS/submission.html
+++ b/files/templates/CHRISTMAS/submission.html
@@ -319,7 +319,7 @@
 			{% if not p.is_image and p.thumb_url and not p.embed_url %}
 			<div class="hidden md:block pl-3 flex-shrink-0">
 				<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
-					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-32 md:h-20 object-cover object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0" alt="post thumbnail">
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-28 md:h-20 object-cover object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0" alt="post thumbnail">
 				</a>
 			</div>
 			{% endif %}
diff --git a/files/templates/CHRISTMAS/submission_listing.html b/files/templates/CHRISTMAS/submission_listing.html
index a94a10fcf7..6ae18422e5 100644
--- a/files/templates/CHRISTMAS/submission_listing.html
+++ b/files/templates/CHRISTMAS/submission_listing.html
@@ -45,7 +45,7 @@
 	</div>
 {% endif %}
 
-<li id="post-{{p.id}}" class="relative p-2.5 mb-1 md:mb-4 md:pb-4 md:pt-0 md:px-0 border-b border-gray-300 dark:border-gray-700 {% if p.is_banned %}bg-red-200{% elif p.deleted_utc %}bg-yellow-200{% else %} md:bg-transparent bg-gray-200 dark:bg-gray-800 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">
+<li id="post-{{p.id}}" class="relative p-2.5 mb-1 md:mb-4 md:pb-3.5 md:pt-0 md:px-0 border-b border-gray-300 dark:border-gray-700 {% if p.is_banned %}bg-red-200{% elif p.deleted_utc %}bg-yellow-200{% else %} md:bg-transparent bg-gray-200 dark:bg-gray-800 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">
 
 	<div class="flex flex-nowrap">
 
@@ -260,26 +260,26 @@
 
 		<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-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+				<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-28 md:h-20 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-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-28 md:h-20 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-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-28 md:h-20 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-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+					<img alt="post thumnail" loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-28 md:h-20 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-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+					<img alt="post thumnail" loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-28 md:h-20 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-32 md:h-20 object-cover  bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-28 md:h-20 object-cover  bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
 				</a>
 			{% endif %}
 		</div>