From 782074d3ea301872aa88c988c08e215ae686f7af Mon Sep 17 00:00:00 2001
From: kek7198 <grayboy99@protonmail.com>
Date: Wed, 24 Nov 2021 10:48:06 -0600
Subject: [PATCH] fix

---
 files/templates/comments/CommentActions.html  | 255 +++++++++++++++++
 files/templates/comments/CommentEditForm.html |  72 +++++
 files/templates/comments/CommentForm.html     |  54 ++++
 .../templates/comments/CommentReplyForm.html  |  78 ++++++
 files/templates/default.html                  | 264 ++++++++----------
 .../templates/dropdowns/NavbarExtraLinks.html |  62 ++++
 files/templates/dropdowns/NavbarProfile.html  |  54 ++++
 files/templates/dropdowns/SearchSorts.html    |  94 +++++++
 .../templates/dropdowns/SubmissionSorts.html  |  94 +++++++
 files/templates/footer.html                   |  98 +++++++
 files/templates/header-tw.html                | 135 +++++++++
 files/templates/home.html                     | 194 +++----------
 files/templates/modals/Modal2FA.html          |  66 +++++
 .../templates/modals/ModalCommentActions.html |  87 ++++++
 .../templates/modals/ModalDeleteAccount.html  |  47 ++++
 .../modals/ModalSubmissionActions.html        | 103 +++++++
 .../modals/ModalSubmissionListingActions.html |  99 +++++++
 files/templates/sidebars/HomeSidebar.html     |  19 ++
 files/templates/sidebars/SettingsSidebar.html |  34 +++
 .../templates/sidebars/SubmissionSidebar.html | 152 ++++++++++
 files/templates/sidebars/SubmitSidebar.html   |  18 ++
 .../submission/SubmissionActions.html         | 242 ++++++++++++++++
 .../submission/SubmissionAwards.html          |  10 +
 .../submission/SubmissionEditForm.html        |  49 ++++
 .../submission/SubmissionListingActions.html  |  90 ++++++
 files/templates/toasts/toasts.html            |  16 ++
 26 files changed, 2188 insertions(+), 298 deletions(-)
 create mode 100644 files/templates/comments/CommentActions.html
 create mode 100644 files/templates/comments/CommentEditForm.html
 create mode 100644 files/templates/comments/CommentForm.html
 create mode 100644 files/templates/comments/CommentReplyForm.html
 create mode 100644 files/templates/dropdowns/NavbarExtraLinks.html
 create mode 100644 files/templates/dropdowns/NavbarProfile.html
 create mode 100644 files/templates/dropdowns/SearchSorts.html
 create mode 100644 files/templates/dropdowns/SubmissionSorts.html
 create mode 100644 files/templates/footer.html
 create mode 100644 files/templates/header-tw.html
 create mode 100644 files/templates/modals/Modal2FA.html
 create mode 100644 files/templates/modals/ModalCommentActions.html
 create mode 100644 files/templates/modals/ModalDeleteAccount.html
 create mode 100644 files/templates/modals/ModalSubmissionActions.html
 create mode 100644 files/templates/modals/ModalSubmissionListingActions.html
 create mode 100644 files/templates/sidebars/HomeSidebar.html
 create mode 100644 files/templates/sidebars/SettingsSidebar.html
 create mode 100644 files/templates/sidebars/SubmissionSidebar.html
 create mode 100644 files/templates/sidebars/SubmitSidebar.html
 create mode 100644 files/templates/submission/SubmissionActions.html
 create mode 100644 files/templates/submission/SubmissionAwards.html
 create mode 100644 files/templates/submission/SubmissionEditForm.html
 create mode 100644 files/templates/submission/SubmissionListingActions.html
 create mode 100644 files/templates/toasts/toasts.html

diff --git a/files/templates/comments/CommentActions.html b/files/templates/comments/CommentActions.html
new file mode 100644
index 000000000..57087dfa6
--- /dev/null
+++ b/files/templates/comments/CommentActions.html
@@ -0,0 +1,255 @@
+<ul class="flex items-center space-x-5 text-sm text-gray-500">
+
+	{% if v and request.path.startswith('/@') and v.admin_level == 0%}
+	{% if voted==1 %}
+	<li class="list-inline-item arrow-up hidden md:block px-2 mx-0 comment-{{c.id}}-up active"></li>
+	{% endif %}
+	{% elif v %}
+
+	<li id="comment-{{c.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('comment', '{{c.id}}', '1')" class="list-inline-item arrow-up upvote-button hidden md:block px-2 mx-0 comment-{{c.id}}-up {% if voted==1 %}active{% endif %}"></li>
+
+	{% else %}
+	<li id="comment-{{c.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('comment', '{{c.id}}', '1')" class="list-inline-item arrow-up hidden md:block mr-2" onclick="location.href='/login';">
+	</li>
+
+	{% endif %}
+
+	<li class="list-inline-item hidden md:block m-0">
+		<span class="points" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="+{{ups}} | -{{downs}}"><span id="comment-score-{{c.id}}" class="score comment-score-{{c.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}">{{score}}</span></span>
+	</li>
+
+	{% if v and request.path.startswith('/@') and v.admin_level == 0 %}
+	{% if voted==-1 %}
+	<li class="list-inline-item arrow-down hidden md:block px-2 mx-0 comment-{{c.id}}-down active"></li>
+	{% endif %}
+	{% elif v %}
+	<li {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="comment-{{c.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('comment', '{{c.id}}', '-1')" class="list-inline-item arrow-down downvote-button hidden md:block px-2 mx-0 comment-{{c.id}}-down {% if voted==-1 %}active{% endif %}"></li>
+
+	{% else %}
+
+	{% if environ.get('DISABLE_DOWNVOTES') != '1' %}
+	<li id="comment-{{c.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('comment', '{{c.id}}', '-1')" class="list-inline-item arrow-down hidden md:block" onclick="location.href='/login';">
+	</li>
+	{% endif %}
+
+	{% endif %}
+
+	{% if v %}
+	<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>Give Award
+		</button>
+	</li>
+	<li id="unsave-{{c.id}}" class="hidden {% if c.id in v.saved_comment_idlist() %}md:block{% endif %}">
+		<button onclick="post_toast3('/unsave_comment/{{c.id}}','save-{{c.id}}','unsave-{{c.id}}')">
+			<i class="fas fa-bookmark fa-fw mr-2"></i>Unsave
+		</button>
+	</li>
+	<li id="save-{{c.id}}" class="hidden {% if c.id not in v.saved_comment_idlist() %}md:block{% endif %}">
+		<button onclick="post_toast3('/save_comment/{{c.id}}','save-{{c.id}}','unsave-{{c.id}}')">
+			<i class="far fa-bookmark fa-fw mr-2"></i>Save
+		</button>
+	</li>
+	<li>
+		<button onclick="openReplyBox('{{c.id}}')">
+			<i class="fas fa-reply fa-fw mr-2"></i>Reply
+		</button>
+	</li>
+	<li class="hidden md:block">
+		<button class="copy-link hover:text-gray-400" data-clipboard-text="{% if 'rama' in request.host %}https://dogpill.life{{c.permalink}}{% else %}{{c.permalink | full_link}}{% endif %}?context=10#context">
+			<i class="fas fa-link fa-fw mr-2"></i>Copy link
+		</button>
+	</li>
+	{% endif %}
+
+	<li class="hidden md:block">
+		<div class="dropdown">
+			<button type="button" id="dropdownComment-{{c.id}}Actions" data-bs-toggle="dropdown" aria-expanded="false">
+				<i class="fas fa-ellipsis-h fa-fw"></i>
+			</button>
+			<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownComment-{{c.id}}Actions">
+				<li class="hidden md:block">
+					<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/votes?link={{c.fullname}}">
+						<i class="fas fa-arrows-v fa-sm fa-fw mr-4"></i>Votes
+					</a>
+				</li>
+				<li class="hidden md:block">
+					<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" {% if v %}href="{{c.permalink}}?context=10#context"{% else %}href="/logged_out{{c.permalink}}?context=10#context"{% endif %}>
+						<i class="fas fa-book-open fa-sm fa-fw mr-4"></i>Context
+					</a>
+				</li>
+				{% if v %}
+				<li class="hidden md:block">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" data-bs-toggle="modal" data-bs-target="#reportCommentModal" onclick="report_commentModal('{{c.id}}','{{c.author.username}}',)">
+						<i class="fas fa-flag fa-sm fa-fw mr-4"></i>Report
+					</button>
+				</li>
+				{% endif %}
+				{% if v and c.parent_submission and c.author_id==v.id %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li class="hidden md:block">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="toggleEdit('{{c.id}}')">
+						<i class="fas fa-edit fa-sm fa-fw mr-4"></i>Edit
+					</button>
+				</li>
+
+				{% if c.deleted_utc > 0 %}
+				<li class="hidden md:block">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast('/undelete/comment/{{c.id}}')">
+						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Undelete
+					</button>
+				</li>
+				{% else %}
+				<li class="hidden md:block">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" data-bs-toggle="modal" data-bs-target="#deleteCommentModal" onclick="delete_commentModal('{{c.id}}')">
+						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Delete
+					</button>
+				</li>
+				{% endif %}
+
+				{% endif %}
+				{% if v and v.admin_level==6 and v.id==c.author_id %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li id="undistinguish-{{c.id}}" class="hidden {% if c.distinguish_level %}md:block{% endif %}">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast3('/distinguish_comment/{{c.id}}','distinguish-{{c.id}}','undistinguish-{{c.id}}','no')">
+						<i class="fas fa-id-badge text-info fa-sm fa-fw mr-4"></i>Undistinguish
+					</button>
+				</li>
+				<li id="distinguish-{{c.id}}" class="hidden {% if not c.distinguish_level %}md:block{% endif %}">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast3('/distinguish_comment/{{c.id}}','distinguish-{{c.id}}','undistinguish-{{c.id}}','yes')">
+						<i class="fas fa-id-badge text-info fa-sm fa-fw mr-4"></i>Distinguish
+					</button>
+				</li>
+				{% endif %}
+
+				{% if v and not v.id==c.author_id and not (c.post and c.post.award_count("ghosts")) %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li class="hidden {% if c.is_blocking %}md:block{% endif %} text-green-600">
+					<button id="unblock-{{c.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast3('/settings/unblock?username={{c.author.username}}','block-{{c.id}}','unblock-{{c.id}}')">
+						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Unblock user
+					</button>
+				</li>
+				<li id="prompt-{{c.id}}" class="hidden text-red-600">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast3('/settings/block?username={{c.author.username}}','prompt-{{c.id}}','unblock-{{c.id}}')">
+						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Are you sure?
+					</button>
+				</li>
+				<li class="hidden {% if not c.is_blocking %}md:block{% endif %} text-red-600">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" id="block-{{c.id}}" onclick="document.getElementById('block-{{c.id}}').classList.toggle('md:block');document.getElementById('prompt-{{c.id}}').classList.toggle('md:block');">
+						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Block user
+					</button>
+				</li>
+				{% endif %}
+
+				{% if v and c.post and (v.admin_level >= 1 or v.id == c.post.author_id) and c.level == 1 %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li id="unpin-{{c.id}}" class="hidden {% if c.is_pinned %}md:block{% endif %}">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" data-bs-dismiss="modal" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast3('/pin_comment/{{c.id}}','pin-{{c.id}}','unpin-{{c.id}}')">
+						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Unpin
+					</button>
+				</li>
+				<li id="pin-{{c.id}}" class="hidden {% if not c.is_pinned %}md:block{% endif %}">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" data-bs-dismiss="modal" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast3('/pin_comment/{{c.id}}','pin-{{c.id}}','unpin-{{c.id}}')">
+						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Pin
+					</button>
+				</li>
+				{% endif %}
+
+				{% if v and v.admin_level>=3 %}
+				{% if "/reported/" in request.path %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li class="hidden md:block">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="approveComment('{{c.id}}')"><i class="fas fa-check text-green-600 fa-sm fa-fw mr-4"></i>Approve</button>
+				</li>
+				<li class="hidden md:block">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="removeComment('{{c.id}}')"><i class="fas fa-ban text-red-600 fa-sm fa-fw mr-4"></i>Remove</button>
+				</li>
+				{% else %}
+				<li id="approve-{{c.id}}" class="hidden {% if c.is_banned %}md:block{% endif %}">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="approveComment('{{c.id}}','approve-{{c.id}}','remove-{{c.id}}')">
+						<i class="fas fa-check text-green-600 fa-sm fa-fw mr-4"></i>Approve
+					</button>
+				</li>
+				<li id="remove-{{c.id}}" class="hidden {% if not c.is_banned %}md:block{% endif %}"> 
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="removeComment('{{c.id}}','approve-{{c.id}}','remove-{{c.id}}')">
+						<i class="fas fa-ban text-red-600 fa-sm fa-fw mr-4"></i>Remove
+					</button>
+				</li>
+				{% endif %}
+				{% endif %}
+
+				{% if v and c.parent_submission and (c.author_id==v.id or v.admin_level > 0) %}
+				<li id="unmark-{{c.id}}" class="hidden {% if c.over_18 %}md:block{% endif %} text-red-600">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast3('/toggle_comment_nsfw/{{c.id}}','mark-{{c.id}}','unmark-{{c.id}}')">
+						<i class="fas fa-eye-evil text-red-600 fa-sm fa-fw mr-4"></i>Unmark +18
+					</button>
+				</li>
+				<li id="mark-{{c.id}}" class="hidden {% if not c.over_18 %}md:block{% endif %} text-red-600">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast3('/toggle_comment_nsfw/{{c.id}}','mark-{{c.id}}','unmark-{{c.id}}')">
+						<i class="fas fa-eye-evil fa-sm fa-fw mr-4"></i>Mark +18
+					</button>
+				</li>
+				{% endif %}
+
+				{% if v and v.admin_level==6 and v.id != c.author_id %}
+				<li id="unban-{{c.id}}" class="hidden {% if c.author.is_suspended %}md:block{% endif %}">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast3('/unban_user/{{c.author_id}}','ban-{{c.id}}','unban-{{c.id}}')">
+						<i class="fas fa-user-slash text-green-600 fa-sm fa-fw mr-4"></i>Unban user
+					</button>
+				</li>
+				<li id="ban-{{c.id}}" class="hidden {% if not c.author.is_suspended %}md:block{% endif %}">
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/comment/{{c.id}}', '{{ c.author.id }}', '{{c.author.username}}')">
+						<i class="fas fa-user-slash text-red-600 fa-sm fa-fw mr-4"></i>Ban user
+					</button>
+				</li>
+				{% endif %}
+
+				{% if v and v.admin_level >=4 and c.oauth_app %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li class="hidden md:block">
+					<a href="{{c.oauth_app.permalink}}/comments" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700">
+						<i class="fas fa-code fa-sm fa-fw mr-4"></i>API App
+					</a>
+				</li>
+				{% endif %}
+			</ul>
+		</div>
+	</li>
+
+	<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>
+		</button>
+	</li>
+	{% if v and request.path.startswith('/@') and v.admin_level == 0 %}
+	{% if voted==1 %}
+	<li class="list-inline-item arrow-up d-inline-block md:hidden mr-2 comment-{{c.id}}-up active"></li>
+	{% endif %}
+	{% elif v %}
+	<li id="comment-mobile-{{c.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('comment-mobile', '{{c.id}}', '1')" class="list-inline-item arrow-up upvote-button d-inline-block md:hidden mx-0 pr-1 comment-{{c.id}}-up {% if voted==1 %}active{% endif %}"></li>
+	{% else %}
+	<li id="comment-{{c.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('comment', '{{c.id}}', '1')" class="list-inline-item arrow-up d-inline-block md:hidden mx-0 pr-1" onclick="location.href='/login';"></li>
+	{% endif %}
+	<li class="list-inline-item d-inline-block md:hidden mx-0"><span class="points" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="+{{ups}} | -{{downs}}"><span id="comment-mobile-score-{{c.id}}" class="score comment-score-{{c.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}">{{score}}</span></span></li>
+	{% if v and request.path.startswith('/@') and v.admin_level == 0 %}
+	{% if voted==-1 %}
+	<li class="list-inline-item arrow-down d-inline-block md:hidden mr-2 comment-{{c.id}}-up active"></li>
+	{% endif %}
+	{% elif v %}
+	<li {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="comment-mobile-{{c.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('comment-mobile', '{{c.id}}', '-1')" class="list-inline-item arrow-down downvote-button d-inline-block md:hidden mx-0 pl-1 comment-{{c.id}}-down {% if voted==-1 %}active{% endif %}"></li>
+	{% else %}
+	<li {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="comment-{{c.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('comment', '{{c.id}}', '-1')" class="list-inline-item arrow-down mx-0 pl-1 d-inline-block md:hidden" onclick="location.href='/login';"></li>
+	{% endif %}
+</ul>
\ No newline at end of file
diff --git a/files/templates/comments/CommentEditForm.html b/files/templates/comments/CommentEditForm.html
new file mode 100644
index 000000000..f4aed9ecb
--- /dev/null
+++ b/files/templates/comments/CommentEditForm.html
@@ -0,0 +1,72 @@
+<div id="comment-edit-{{c.id}}" class="hidden flex flex-wrap w-full">
+	<form id="comment-edit-form-{{c.id}}" action="/edit_comment/{{c.id}}" method="post" class="input-group" enctype="multipart/form-data"> 
+		<input type="hidden" name="formkey" value="{{v.formkey}}">
+		<div class="comment-box rounded-lg border border-gray-700 border-dashed bg-gray-900 shadow-inner w-full">
+			<textarea maxlength="10000" id="comment-edit-body-{{c.id}}" data-id="{{c.id}}" name="body" form="comment-edit-form-{{c.id}}" class="w-full rounded-t-md p-3 text-gray-200 focus:text-gray-900 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="Add your comment..." rows="3">{{c.body}}</textarea> 
+			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-white border-opacity-10">
+				<li>
+					<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('comment-edit-body-{{c.id}}')">
+						<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-500 hover:text-gray-400" onclick="makeItalics('comment-edit-body-{{c.id}}')">
+						<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-500 hover:text-gray-400" onclick="makeQuote('comment-edit-body-{{c.id}}')">
+						<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-500 hover:text-gray-400" onclick="commentForm('comment-edit-body-{{c.id}}');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-500 hover:text-gray-400" onclick="loadEmojis('comment-edit-body-{{c.id}}')" 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>
+				{% if v %}
+				<li>
+					<button type="button" class="text-gray-500 hover:text-gray-400">
+						<div id="filename-edit-reply-{{c.id}}">
+							<i class="fas fa-camera fa-fw fa-sm"></i>
+						</div>
+						<input id="file-edit-reply-{{c.id}}" type="file" name="file" accept="image/*" onchange="document.getElementById('filename-edit-reply-{{c.id}}').innerHTML='image';" hidden>
+					</button>
+				</li>
+				{% endif %}
+			</ul>
+		</div>
+		<div class="flex w-full justify-between mt-2">
+			<a href="/formatting" target="_blank" class="inline-block text-sm text-gray-600">
+				Formatting help
+			</a>
+			<div class="ml-auto flex">
+				<button type="button" id="cancel-edit-{{c.id}}" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-400" onclick="toggleEdit('{{c.id}}')">
+					Cancel
+				</button>
+				<button type="button" form="comment-edit-form-{{c.id}}" class="ml-2 block px-4 py-2 bg-gradient-to-t from-pink-800 to-pink-700 hover:from-pink-700 hover:to-pink-800 active:shadow-inner border border-gray-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:outline-none" onclick="comment_edit('{{c.id}}')">
+					Save edit
+				</button>
+			</div>
+		</div>
+		<!-- <div class="comment-format"> 
+			<small class="btn btn-secondary format d-inline-block m-0"><span class="font-weight-bolder text-uppercase" aria-hidden="true" onclick="commentForm('comment-edit-body-{{c.id}}');getGif()" 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></small>
+			&nbsp;
+			<small class="btn btn-secondary format d-inline-block m-0"><i class="fas fa-smile-beam" aria-hidden="true" onclick="loadEmojis('comment-edit-body-{{c.id}}')" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Add Emoji"></i></small>
+			&nbsp;
+			<label class="btn btn-secondary format d-inline-block m-0" for="file-edit-reply-{{c.id}}">
+				<div id="filename-edit-reply-{{c.id}}"><i class="far fa-image"></i></div>
+				<input id="file-edit-reply-{{c.id}}" type="file" name="file" accept="image/*" onchange="document.getElementById('filename-edit-reply-{{c.id}}').innerHTML='image';" hidden>
+			</label>
+
+			<a id="cancel-edit-{{c.id}}" href="javascript:void(0)" onclick="toggleEdit('{{c.id}}')" class="hidden d-md-block btn btn-link text-muted ml-auto cancel-form">Cancel</a> 
+			<a href="javascript:void(0)" form="comment-edit-form-{{c.id}}" class="hidden d-md-block btn btn-primary ml-2" onclick="comment_edit('{{c.id}}')">Save Edit</a> 
+		</div>
+		<a id="cancel-edit-{{c.id}}" href="javascript:void(0)" onclick="toggleEdit('{{c.id}}')" class="md:hidden btn btn-link text-muted ml-auto cancel-form">Cancel</a> 
+		<a href="javascript:void(0)" form="comment-edit-form-{{c.id}}" class="md:hidden btn btn-primary ml-2" onclick="comment_edit('{{c.id}}')">Save Edit</a>  -->
+	</form>
+</div>
\ No newline at end of file
diff --git a/files/templates/comments/CommentForm.html b/files/templates/comments/CommentForm.html
new file mode 100644
index 000000000..a1ad441e9
--- /dev/null
+++ b/files/templates/comments/CommentForm.html
@@ -0,0 +1,54 @@
+{% if v %}
+<form id="reply-to-{{p.fullname}}" class="flex flex-wrap w-full" action="/comment" method="post">
+	<input type="hidden" name="formkey" value="{{v.formkey}}">
+	<input type="hidden" name="parent_fullname" value="t2_{{p.id}}">
+	<input id="reply-form-submission-{{p.fullname}}" type="hidden" name="submission" value="{{p.id}}">
+	<div class="comment-box rounded-lg border border-gray-900 bg-gray-900 shadow-inner w-full">
+		<textarea maxlength="10000" id="reply-form-body-{{p.fullname}}" data-fullname="{{p.fullname}}" class="w-full rounded-t-md p-3 text-gray-200 focus:text-gray-900 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" id="comment-form" name="body" form="reply-to-{{p.fullname}}" aria-label="With textarea" placeholder="Add your comment..." rows="3"></textarea>
+		<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-white border-opacity-10">
+			<li>
+				<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('reply-form-body-{{p.fullname}}')">
+					<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-500 hover:text-gray-400" onclick="makeItalics('reply-form-body-{{p.fullname}}')">
+					<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-500 hover:text-gray-400" onclick="makeQuote('reply-form-body-{{p.fullname}}')">
+					<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" id="gif-reply-btn-{{p.fullname}}" class="text-gray-500 hover:text-gray-400" onclick="commentForm('reply-form-body-{{p.fullname}}');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" id="emoji-reply-btn-{{p.fullname}}" class="text-gray-500 hover:text-gray-400" onclick="loadEmojis('reply-form-body-{{p.fullname}}')" 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>
+			{% if v %}
+			<li>
+				<button type="button" class="text-gray-500 hover:text-gray-400">
+					<div id="filename-show-reply-{{p.fullname}}">
+						<i class="fas fa-camera fa-fw fa-sm"></i>
+					</div>
+					<input id="file-upload-reply-{{p.fullname}}" type="file" name="file" accept="image/*" onchange="document.getElementById('filename-show-reply-{{p.fullname}}').innerHTML='image';" hidden>
+				</button>
+			</li>
+			{% endif %}
+		</ul>
+	</div>
+	<div class="flex w-full justify-between mt-2">
+		<a href="/formatting" target="_blank" class="inline-block text-sm text-gray-600">
+			Formatting help
+		</a>
+		<button type="button" id="save-reply-to-{{p.fullname}}" form="reply-to-{{p.fullname}}" class="ml-auto block px-4 py-2 bg-gradient-to-t from-pink-800 to-pink-700 hover:from-pink-700 hover:to-pink-800 active:shadow-inner border border-gray-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:outline-none" onclick="post_comment('{{p.fullname}}', '{{p.id}}')">
+			Comment
+		</button>
+	</div>
+</form>
+{% endif %}
\ No newline at end of file
diff --git a/files/templates/comments/CommentReplyForm.html b/files/templates/comments/CommentReplyForm.html
new file mode 100644
index 000000000..b649d7504
--- /dev/null
+++ b/files/templates/comments/CommentReplyForm.html
@@ -0,0 +1,78 @@
+<div id="comment-form-space-{{c.fullname}}" class="flex flex-wrap w-full">
+	<form id="reply-to-t3_{{c.id}}" action="/comment" method="post" class="input-group" enctype="multipart/form-data"> 
+		<input type="hidden" name="formkey" value="{{v.formkey}}"> 
+		<input type="hidden" name="parent_fullname" value="{{c.fullname}}"> 
+		<input id="reply-form-submission-{{c.fullname}}" type="hidden" name="submission" value="{{c.post.id}}">
+		<div class="comment-box rounded-lg border border-gray-900 bg-gray-900 shadow-inner w-full"> 
+			<textarea maxlength="10000" id="reply-form-body-{{c.fullname}}" data-fullname="{{c.fullname}}" name="body" form="reply-to-t3_{{c.id}}" class="w-full rounded-t-md p-3 text-gray-200 focus:text-gray-900 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="Add your reply..." rows="3"></textarea>
+			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-white border-opacity-10">
+				<li>
+					<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('reply-form-body-{{c.fullname}}')">
+						<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-500 hover:text-gray-400" onclick="makeItalics('reply-form-body-{{c.fullname}}')">
+						<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-500 hover:text-gray-400" onclick="makeQuote('reply-form-body-{{c.fullname}}')">
+						<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-500 hover:text-gray-400" onclick="commentForm('reply-form-body-{{c.fullname}}');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-500 hover:text-gray-400" onclick="loadEmojis('reply-form-body-{{c.fullname}}')" 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>
+				{% if v %}
+				<li>
+					<label for="file-upload-reply-{{c.fullname}}" class="text-gray-500 hover:text-gray-400">
+						<div id="filename-show-reply-{{c.fullname}}">
+							<i class="fas fa-camera fa-fw fa-sm"></i>
+						</div>
+						<input id="file-upload-reply-{{c.fullname}}" type="file" name="file" accept="image/*" onchange="document.getElementById('filename-show-reply-{{c.fullname}}').innerHTML='image';" hidden>
+					</label>
+				</li>
+				{% endif %}
+			</ul>
+		</div>
+		<div class="flex w-full justify-between mt-2">
+			<a href="/formatting" target="_blank" class="inline-block text-sm text-gray-600">
+				Formatting help
+			</a>
+			<div class="ml-auto flex">
+				<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-400" onclick="document.getElementById('reply-to-{{c.id}}').classList.add('hidden')">
+					Cancel
+				</button>
+				<button type="button" id="save-reply-to-{{c.fullname}}" class="ml-2 block px-4 py-2 bg-gradient-to-t from-pink-800 to-pink-700 hover:from-pink-700 hover:to-pink-800 active:shadow-inner border border-gray-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:outline-none" onclick="post_comment('{{c.fullname}}', '{{c.post.id}}');">
+					Comment
+				</button>
+			</div>
+		</div>
+		<!-- <div class="comment-format" id="comment-format-bar-{{c.id}}"> 
+			<label class="btn btn-secondary format d-inline-block m-0" for="gif-reply-btn-{{c.fullname}}">
+				<span id="gif-reply-btn-{{c.fullname}}" class="font-weight-bolder text-uppercase" onclick="commentForm('reply-form-body-{{c.fullname}}');getGif()" 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>
+			</label> 
+			&nbsp;
+			<label class="btn btn-secondary format d-inline-block m-0" for="gif-reply-btn-{{c.fullname}}">
+				<i id="emoji-reply-btn-{{c.fullname}}" class="fas fa-smile-beam" onclick="loadEmojis('reply-form-body-{{c.fullname}}')" 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>
+			</label>
+			&nbsp;
+			<label class="btn btn-secondary format d-inline-block m-0" for="file-upload-reply-{{c.fullname}}">
+				<div id="filename-show-reply-{{c.fullname}}"><i class="far fa-image"></i></div>
+				<input id="file-upload-reply-{{c.fullname}}" type="file" name="file" accept="image/*" onchange="document.getElementById('filename-show-reply-{{c.fullname}}').innerHTML='image';" hidden>
+			</label>
+			<a href="javascript:void(0)" onclick="document.getElementById('reply-to-{{c.id}}').classList.add('hidden')" class="hidden d-md-block btn btn-link text-muted ml-auto cancel-form">Cancel</a> 
+			<a id="save-reply-to-{{c.fullname}}" class="hidden d-md-block btn btn-primary text-muted ml-2" onclick="post_comment('{{c.fullname}}', '{{c.post.id}}');" href="javascript:void(0)">Comment</a>
+		</div>
+		</div>
+		<a href="javascript:void(0)" onclick="document.getElementById('reply-to-{{c.id}}').classList.add('hidden')" class="md:hidden btn btn-link text-muted ml-auto cancel-form">Cancel</a> 
+		<a id="save-reply-to-{{c.fullname}}" class="md:hidden btn btn-primary text-white ml-2" onclick="post_comment('{{c.fullname}}', '{{c.post.id}}');" href="javascript:void(0)">Comment</a> -->
+	</form>
+</div>
\ No newline at end of file
diff --git a/files/templates/default.html b/files/templates/default.html
index 37752ee61..3376dd8c7 100644
--- a/files/templates/default.html
+++ b/files/templates/default.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+<head>  
 	<script src="/assets/js/lozad.js?v=53"></script>
 	<script>
 		const observer = lozad();
@@ -10,55 +10,7 @@
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 
 	{% if v and v.agendaposter %}
-		<script>
-			var BugDispatch={options:{minDelay:500,maxDelay:1E4,minBugs:2,maxBugs:20,minSpeed:5,maxSpeed:10,maxLargeTurnDeg:150,maxSmallTurnDeg:10,maxWiggleDeg:5,imageSprite:"fly-sprite.webp",bugWidth:13,bugHeight:14,num_frames:5,zoom:10,canFly:!0,canDie:!0,numDeathTypes:3,monitorMouseMovement:!1,eventDistanceToBug:40,minTimeBetweenMultipy:1E3,mouseOver:"random"},initialize:function(a){this.options=mergeOptions(this.options,a);this.options.minBugs>this.options.maxBugs&&(this.options.minBugs=this.options.maxBugs);
-			this.modes=["multiply","nothing"];this.options.canFly&&this.modes.push("fly","flyoff");this.options.canDie&&this.modes.push("die");-1==this.modes.indexOf(this.options.mouseOver)&&(this.options.mouseOver="random");this.transform=null;this.transforms={Moz:function(a){this.bug.style.MozTransform=a},webkit:function(a){this.bug.style.webkitTransform=a},O:function(a){this.bug.style.OTransform=a},ms:function(a){this.bug.style.msTransform=a},Khtml:function(a){this.bug.style.KhtmlTransform=a},w3c:function(a){this.bug.style.transform=
-			a}};if("transform"in document.documentElement.style)this.transform=this.transforms.w3c;else{var b=["Moz","webkit","O","ms","Khtml"],c=0;for(c=0;c<b.length;c++)if(b[c]+"Transform"in document.documentElement.style){this.transform=this.transforms[b[c]];break}}if(this.transform){this.bugs=[];b="multiply"===this.options.mouseOver?this.options.minBugs:this.random(this.options.minBugs,this.options.maxBugs,!0);c=0;var d=this;for(c=0;c<b;c++){a=JSON.parse(JSON.stringify(this.options));var e=SpawnBug();a.wingsOpen=
-			this.options.canFly?.5<Math.random()?!0:!1:!0;a.walkSpeed=this.random(this.options.minSpeed,this.options.maxSpeed);e.initialize(this.transform,a);this.bugs.push(e)}this.spawnDelay=[];for(c=0;c<b;c++)a=this.random(this.options.minDelay,this.options.maxDelay,!0),e=this.bugs[c],this.spawnDelay[c]=setTimeout(function(a){return function(){d.options.canFly?a.flyIn():a.walkIn()}}(e),a),d.add_events_to_bug(e);this.options.monitorMouseMovement&&(window.onmousemove=function(){d.check_if_mouse_close_to_bug()})}},
-			stop:function(){for(var a=0;a<this.bugs.length;a++)this.spawnDelay[a]&&clearTimeout(this.spawnDelay[a]),this.bugs[a].stop()},end:function(){for(var a=0;a<this.bugs.length;a++)this.spawnDelay[a]&&clearTimeout(this.spawnDelay[a]),this.bugs[a].stop(),this.bugs[a].remove()},reset:function(){this.stop();for(var a=0;a<this.bugs.length;a++)this.bugs[a].reset(),this.bugs[a].walkIn()},killAll:function(){for(var a=0;a<this.bugs.length;a++)this.spawnDelay[a]&&clearTimeout(this.spawnDelay[a]),this.bugs[a].die()},
-			add_events_to_bug:function(a){var b=this;a.bug&&(a.bug.addEventListener?a.bug.addEventListener("mouseover",function(c){b.on_bug(a)}):a.bug.attachEvent&&a.bug.attachEvent("onmouseover",function(c){b.on_bug(a)}))},check_if_mouse_close_to_bug:function(a){if(a=a||window.event){var b=0,c=0;a.client&&a.client.x?(b=a.client.x,c=a.client.y):a.clientX?(b=a.clientX,c=a.clientY):a.page&&a.page.x?(b=a.page.x-(document.body.scrollLeft+document.documentElement.scrollLeft),c=a.page.y-(document.body.scrollTop+document.documentElement.scrollTop)):
-			a.pageX&&(b=a.pageX-(document.body.scrollLeft+document.documentElement.scrollLeft),c=a.pageY-(document.body.scrollTop+document.documentElement.scrollTop));a=this.bugs.length;var d;for(d=0;d<a;d++){var e=this.bugs[d].getPos();e&&Math.abs(e.top-c)+Math.abs(e.left-b)<this.options.eventDistanceToBug&&!this.bugs[d].flyperiodical&&this.near_bug(this.bugs[d])}}},near_bug:function(a){this.on_bug(a)},on_bug:function(a){if(a.alive){var b=this.options.mouseOver;"random"===b&&(b=this.modes[this.random(0,this.modes.length-
-			1,!0)]);if("fly"===b)a.stop(),a.flyRand();else if("nothing"!==b)if("flyoff"===b)a.stop(),a.flyOff();else if("die"===b)a.die();else if("multiply"===b&&!this.multiplyDelay&&this.bugs.length<this.options.maxBugs){var c=SpawnBug();b=JSON.parse(JSON.stringify(this.options));var d=a.getPos(),e=this;b.wingsOpen=this.options.canFly?.5<Math.random()?!0:!1:!0;b.walkSpeed=this.random(this.options.minSpeed,this.options.maxSpeed);c.initialize(this.transform,b);c.drawBug(d.top,d.left);b.canFly?(c.flyRand(),a.flyRand()):
-			(c.go(),a.go());this.bugs.push(c);this.multiplyDelay=!0;setTimeout(function(){e.add_events_to_bug(c);e.multiplyDelay=!1},this.options.minTimeBetweenMultipy)}}},random:function(a,b,c){if(a==b)return c?Math.round(a):a;var d=a-.5+Math.random()*(b-a+1);d>b?d=b:d<a&&(d=a);return c?Math.round(d):d}},BugController=function(){this.initialize.apply(this,arguments)};BugController.prototype=BugDispatch;
-			var SpiderController=function(){this.options=mergeOptions(this.options,{imageSprite:"spider-sprite.webp",bugWidth:69,bugHeight:90,num_frames:7,canFly:!1,canDie:!0,numDeathTypes:2,zoom:6,minDelay:200,maxDelay:3E3,minSpeed:6,maxSpeed:13,minBugs:3,maxBugs:10});this.initialize.apply(this,arguments)};SpiderController.prototype=BugDispatch;
-			var Bug={options:{wingsOpen:!1,walkSpeed:2,flySpeed:40,edge_resistance:50,zoom:10},initialize:function(a,b){this.options=mergeOptions(this.options,b);this.NEAR_TOP_EDGE=1;this.NEAR_BOTTOM_EDGE=2;this.NEAR_LEFT_EDGE=4;this.NEAR_RIGHT_EDGE=8;this.directions={};this.directions[this.NEAR_TOP_EDGE]=270;this.directions[this.NEAR_BOTTOM_EDGE]=90;this.directions[this.NEAR_LEFT_EDGE]=0;this.directions[this.NEAR_RIGHT_EDGE]=180;this.directions[this.NEAR_TOP_EDGE+this.NEAR_LEFT_EDGE]=315;this.directions[this.NEAR_TOP_EDGE+
-			this.NEAR_RIGHT_EDGE]=225;this.directions[this.NEAR_BOTTOM_EDGE+this.NEAR_LEFT_EDGE]=45;this.directions[this.NEAR_BOTTOM_EDGE+this.NEAR_RIGHT_EDGE]=135;this.large_turn_angle_deg=this.angle_rad=this.angle_deg=0;this.near_edge=!1;this.edge_test_counter=10;this.fly_counter=this.large_turn_counter=this.small_turn_counter=0;this.toggle_stationary_counter=50*Math.random();this.zoom=this.random(this.options.zoom,10)/10;this.stationary=!1;this.bug=null;this.active=!0;this.wingsOpen=this.options.wingsOpen;
-			this.transform=a;this.flyIndex=this.walkIndex=0;this.alive=!0;this.twitchTimer=null;this.rad2deg_k=180/Math.PI;this.deg2rad_k=Math.PI/180;this.makeBug();this.angle_rad=this.deg2rad(this.angle_deg);this.angle_deg=this.random(0,360,!0)},go:function(){if(this.transform){this.drawBug();var a=this;this.animating=!0;this.going=requestAnimFrame(function(b){a.animate(b)})}},stop:function(){this.animating=!1;this.going&&(clearTimeout(this.going),this.going=null);this.flyperiodical&&(clearTimeout(this.flyperiodical),
-			this.flyperiodical=null);this.twitchTimer&&(clearTimeout(this.twitchTimer),this.twitchTimer=null)},remove:function(){this.active=!1;this.inserted&&this.bug.parentNode&&(this.bug.parentNode.removeChild(this.bug),this.inserted=!1)},reset:function(){this.active=this.alive=!0;this.bug.style.bottom="";this.bug.style.top=0;this.bug.style.left=0;this.bug.classList.remove("bug-dead")},animate:function(a){if(this.animating&&this.alive&&this.active){var b=this;this.going=requestAnimFrame(function(a){b.animate(a)});
-			"_lastTimestamp"in this||(this._lastTimestamp=a);var c=a-this._lastTimestamp;if(!(40>c||(200<c&&(c=200),this._lastTimestamp=a,0>=--this.toggle_stationary_counter&&this.toggleStationary(),this.stationary))){if(0>=--this.edge_test_counter&&this.bug_near_window_edge()&&(this.angle_deg%=360,0>this.angle_deg&&(this.angle_deg+=360),15<Math.abs(this.directions[this.near_edge]-this.angle_deg))){a=this.directions[this.near_edge]-this.angle_deg;var d=360-this.angle_deg+this.directions[this.near_edge];this.large_turn_angle_deg=
-			Math.abs(a)<Math.abs(d)?a:d;this.edge_test_counter=10;this.large_turn_counter=100;this.small_turn_counter=30}0>=--this.large_turn_counter&&(this.large_turn_angle_deg=this.random(1,this.options.maxLargeTurnDeg,!0),this.next_large_turn());if(0>=--this.small_turn_counter)this.angle_deg+=this.random(1,this.options.maxSmallTurnDeg),this.next_small_turn();else{a=this.random(1,this.options.maxWiggleDeg,!0);if(0<this.large_turn_angle_deg&&0>a||0>this.large_turn_angle_deg&&0<a)a=-a;this.large_turn_angle_deg-=
-			a;this.angle_deg+=a}this.angle_rad=this.deg2rad(this.angle_deg);this.moveBug(this.bug.left+c/100*this.options.walkSpeed*Math.cos(this.angle_rad),this.bug.top+c/100*this.options.walkSpeed*-Math.sin(this.angle_rad),90-this.angle_deg);this.walkFrame()}}},makeBug:function(){if(!this.bug&&this.active){var a=this.wingsOpen?"0":"-"+this.options.bugHeight+"px",b=document.createElement("div");b.className="bug";b.style.background="transparent url("+this.options.imageSprite+") no-repeat 0 "+a;b.style.width=
-			this.options.bugWidth+"px";b.style.height=this.options.bugHeight+"px";b.style.position="fixed";b.style.top=0;b.style.left=0;b.style.zIndex="9999999";this.bug=b;this.setPos()}},setPos:function(a,b){this.bug.top=a||this.random(this.options.edge_resistance,document.documentElement.clientHeight-this.options.edge_resistance);this.bug.left=b||this.random(this.options.edge_resistance,document.documentElement.clientWidth-this.options.edge_resistance);this.moveBug(this.bug.left,this.bug.top,90-this.angle_deg)},
-			moveBug:function(a,b,c){this.bug.left=a;this.bug.top=b;a="translate("+parseInt(a)+"px,"+parseInt(b)+"px)";c&&(a+=" rotate("+c+"deg)");a+=" scale("+this.zoom+")";this.transform(a)},drawBug:function(a,b){this.bug||this.makeBug();this.bug&&(a&&b?this.setPos(a,b):this.setPos(this.bug.top,this.bug.left),this.inserted||(this.inserted=!0,document.body.appendChild(this.bug)))},toggleStationary:function(){this.stationary=!this.stationary;this.next_stationary();var a=this.wingsOpen?"0":"-"+this.options.bugHeight+
-			"px";this.bug.style.backgroundPosition=this.stationary?"0 "+a:"-"+this.options.bugWidth+"px "+a},walkFrame:function(){this.bug.style.backgroundPosition=-1*this.walkIndex*this.options.bugWidth+"px "+(this.wingsOpen?"0":"-"+this.options.bugHeight+"px");this.walkIndex++;this.walkIndex>=this.options.num_frames&&(this.walkIndex=0)},fly:function(a){var b=this.bug.top,c=this.bug.left,d=c-a.left,e=b-a.top,f=Math.atan(e/d);50>Math.abs(d)+Math.abs(e)&&(this.bug.style.backgroundPosition=-2*this.options.bugWidth+
-			"px -"+2*this.options.bugHeight+"px");30>Math.abs(d)+Math.abs(e)&&(this.bug.style.backgroundPosition=-1*this.options.bugWidth+"px -"+2*this.options.bugHeight+"px");if(10>Math.abs(d)+Math.abs(e))this.bug.style.backgroundPosition="0 0",this.stop(),this.go();else{var g=Math.cos(f)*this.options.flySpeed;f=Math.sin(f)*this.options.flySpeed;if(c>a.left&&0<g||c>a.left&&0>g)g*=-1,Math.abs(d)<Math.abs(g)&&(g/=4);if(b<a.top&&0>f||b>a.top&&0<f)f*=-1,Math.abs(e)<Math.abs(f)&&(f/=4);this.moveBug(c+g,b+f)}},flyRand:function(){this.stop();
-			var a={};a.top=this.random(this.options.edge_resistance,document.documentElement.clientHeight-this.options.edge_resistance);a.left=this.random(this.options.edge_resistance,document.documentElement.clientWidth-this.options.edge_resistance);this.startFlying(a)},startFlying:function(a){var b=this.bug.top,c=this.bug.left,d=a.left-c,e=a.top-b;this.bug.left=a.left;this.bug.top=a.top;this.angle_rad=Math.atan(e/d);this.angle_deg=this.rad2deg(this.angle_rad);this.angle_deg=0<d?90+this.angle_deg:270+this.angle_deg;
-			this.moveBug(c,b,this.angle_deg);var f=this;this.flyperiodical=setInterval(function(){f.fly(a)},10)},flyIn:function(){this.bug||this.makeBug();if(this.bug){this.stop();var a=Math.round(4*Math.random()-.5),b=document,c=b.documentElement,d=b.getElementsByTagName("body")[0];b=window.innerWidth||c.clientWidth||d.clientWidth;c=window.innerHeight||c.clientHeight||d.clientHeight;3<a&&(a=3);0>a&&(a=0);0===a?(a=-2*this.options.bugHeight,b*=Math.random()):1===a?(a=Math.random()*c,b+=2*this.options.bugWidth):
-			2===a?(a=c+2*this.options.bugHeight,b*=Math.random()):(a=Math.random()*c,b=-3*this.options.bugWidth);this.bug.style.backgroundPosition=-3*this.options.bugWidth+"px "+(this.wingsOpen?"0":"-"+this.options.bugHeight+"px");this.bug.top=a;this.bug.left=b;this.drawBug();a={};a.top=this.random(this.options.edge_resistance,document.documentElement.clientHeight-this.options.edge_resistance);a.left=this.random(this.options.edge_resistance,document.documentElement.clientWidth-this.options.edge_resistance);this.startFlying(a)}},
-			walkIn:function(){this.bug||this.makeBug();if(this.bug){this.stop();var a=Math.round(4*Math.random()-.5),b=document,c=b.documentElement,d=b.getElementsByTagName("body")[0];b=window.innerWidth||c.clientWidth||d.clientWidth;c=window.innerHeight||c.clientHeight||d.clientHeight;3<a&&(a=3);0>a&&(a=0);0===a?(a=-1.3*this.options.bugHeight,b*=Math.random()):1===a?(a=Math.random()*c,b+=.3*this.options.bugWidth):2===a?(a=c+.3*this.options.bugHeight,b*=Math.random()):(a=Math.random()*c,b=-1.3*this.options.bugWidth);
-			this.bug.style.backgroundPosition=-3*this.options.bugWidth+"px "+(this.wingsOpen?"0":"-"+this.options.bugHeight+"px");this.bug.top=a;this.bug.left=b;this.drawBug();this.go()}},flyOff:function(){this.stop();var a=this.random(0,3),b={},c=document,d=c.documentElement,e=c.getElementsByTagName("body")[0];c=window.innerWidth||d.clientWidth||e.clientWidth;d=window.innerHeight||d.clientHeight||e.clientHeight;0===a?(b.top=-200,b.left=Math.random()*c):1===a?(b.top=Math.random()*d,b.left=c+200):2===a?(b.top=
-			d+200,b.left=Math.random()*c):(b.top=Math.random()*d,b.left=-200);this.startFlying(b)},die:function(){this.stop();var a=this.random(0,this.options.numDeathTypes-1);this.alive=!1;this.drop(a)},drop:function(a){var b=this.bug.top,c=document,d=c.documentElement;c=c.getElementsByTagName("body")[0];var e=window.innerHeight||d.clientHeight||c.clientHeight;e-=this.options.bugHeight;var f=this.random(0,20,!0);Date.now();var g=this;this.bug.classList.add("bug-dead");this.dropTimer=requestAnimFrame(function(c){g._lastTimestamp=
-			c;g.dropping(c,b,e,f,a)})},dropping:function(a,b,c,d,e){a-=this._lastTimestamp;var f=b+.002*a*a,g=this;f>=c?(f=c,clearTimeout(this.dropTimer),this.angle_deg=0,this.angle_rad=this.deg2rad(this.angle_deg),this.transform("rotate("+(90-this.angle_deg)+"deg) scale("+this.zoom+")"),this.bug.style.top=null,this.bug.style.bottom=Math.ceil((this.options.bugWidth*this.zoom-this.options.bugHeight*this.zoom)/2-this.options.bugHeight/2*(1-this.zoom))+"px",this.bug.style.left=this.bug.left+"px",this.bug.style.backgroundPosition=
-			"-"+2*e*this.options.bugWidth+"px 100%",this.twitch(e)):(this.dropTimer=requestAnimFrame(function(a){g.dropping(a,b,c,d,e)}),20>a||(this.angle_deg=(this.angle_deg+d)%360,this.angle_rad=this.deg2rad(this.angle_deg),this.moveBug(this.bug.left,f,this.angle_deg)))},twitch:function(a,b){b||(b=0);var c=this;if(0===a||1===a)c.twitchTimer=setTimeout(function(){c.bug.style.backgroundPosition="-"+(2*a+b%2)*c.options.bugWidth+"px 100%";c.twitchTimer=setTimeout(function(){b++;c.bug.style.backgroundPosition="-"+
-			(2*a+b%2)*c.options.bugWidth+"px 100%";c.twitch(a,++b)},c.random(300,800))},this.random(1E3,1E4))},rad2deg:function(a){return a*this.rad2deg_k},deg2rad:function(a){return a*this.deg2rad_k},random:function(a,b,c){if(a==b)return a;a=Math.round(a-.5+Math.random()*(b-a+1));return c?.5<Math.random()?a:-a:a},next_small_turn:function(){this.small_turn_counter=Math.round(10*Math.random())},next_large_turn:function(){this.large_turn_counter=Math.round(40*Math.random())},next_stationary:function(){this.toggle_stationary_counter=
-			this.random(50,300)},bug_near_window_edge:function(){this.near_edge=0;this.bug.top<this.options.edge_resistance?this.near_edge|=this.NEAR_TOP_EDGE:this.bug.top>document.documentElement.clientHeight-this.options.edge_resistance&&(this.near_edge|=this.NEAR_BOTTOM_EDGE);this.bug.left<this.options.edge_resistance?this.near_edge|=this.NEAR_LEFT_EDGE:this.bug.left>document.documentElement.clientWidth-this.options.edge_resistance&&(this.near_edge|=this.NEAR_RIGHT_EDGE);return this.near_edge},getPos:function(){return this.inserted&&
-			this.bug&&this.bug.style?{top:parseInt(this.bug.top,10),left:parseInt(this.bug.left,10)}:null}},SpawnBug=function(){var a={},b;for(b in Bug)Bug.hasOwnProperty(b)&&(a[b]=Bug[b]);return a},mergeOptions=function(a,b,c){"undefined"==typeof c&&(c=!0);a=c?cloneOf(a):a;for(var d in b)b.hasOwnProperty(d)&&(a[d]=b[d]);return a},cloneOf=function(a){if(null==a||"object"!=typeof a)return a;var b=a.constructor(),c;for(c in a)a.hasOwnProperty(c)&&(b[c]=cloneOf(a[c]));return b};
-			window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a,b){window.setTimeout(a,1E3/60)}}();
-			new BugController({
-				imageSprite: "/assets/images/fly-sprite.webp",
-				canDie: false,
-				minBugs: 2,
-				maxBugs: 2,
-				mouseOver: "fly"
-			});
-			new SpiderController({
-				imageSprite: "/assets/images/spider-sprite.webp",
-				canDie: false,
-				minBugs: 1,
-				maxBugs: 1,
-				mouseOver: "fly"
-			});
-		</script>
+		<script src="/assets/js/agendaposter.js"></script>
 		<noscript>
 			<style>
 				body {
@@ -73,23 +25,21 @@
 
 	{% if v %}
 		<script>function formkey() {return '{{v.formkey}}';}</script>
-		<script src="/assets/js/default.js?v=55"></script>
+		<script src="/assets/js/default.js?v=57"></script>
 	{% endif %}
 
-
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="thumbnail" content="/assets/images/{{'SITE_NAME' | app_config}}/preview.gif">
 
-	<meta name="thumbnail" content="/assets/images/{{'SITE_NAME' | app_config}}/preview.webp?v=2">
-
-	<link rel="icon" type="image/png" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3">
+	<link rel="icon" type="image/png" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif">
 	{% block title %}
 	<title>{{'SITE_NAME' | app_config}}</title>
 
 	<meta property="og:type" content="article" >
 	<meta property="og:title" content="{{'SITE_NAME' | app_config}}" >
 	<meta property="og:site_name" content="{{request.host}}" >
-	<meta property="og:image" content="{{'SITE_NAME' | app_config}}/assets/images/{{'SITE_NAME' | app_config}}/preview.webp?v=2" >
+	<meta property="og:image" content="{{'SITE_NAME' | app_config}}/assets/images/{{'SITE_NAME' | app_config}}/preview.gif" >
 	<meta property="og:url" content="{{request.path | full_link}}">
 	<meta property="og:description" name="description" content="{{'SITE_NAME' | app_config}} - {{'SLOGAN' | app_config}}">
 	<meta property="og:author" name="author" content="@{{request.host_url}}" >
@@ -100,197 +50,185 @@
 	<meta name="twitter:title" content="{{'SITE_NAME' | app_config}}" >
 	<meta name="twitter:creator" content="@{{request.host_url}}">
 	<meta name="twitter:description" content="{{'SITE_NAME' | app_config}} - {{'SLOGAN' | app_config}}" >
-	<meta name="twitter:image" content="/assets/images/{{'SITE_NAME' | app_config}}/preview.webp?v=2" >
+	<meta name="twitter:image" content="/assets/images/{{'SITE_NAME' | app_config}}/preview.gif" >
 	<meta name="twitter:url" content="{{request.path | full_link}}" >
 	{% endblock %}
 
-		<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-touch-fullscreen" content="yes">
 	<meta name="format-detection" content="telephone=no">
 	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 
-	<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3">
+	<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif">
+	<!---<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif">
+		<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif">--->
 		<link rel="manifest" href="/assets/manifest.json">
-		<link rel="mask-icon" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3" color="#{{'DEFAULT_COLOR' | app_config}}">
-		<link rel="shortcut icon" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3">
+		<link rel="mask-icon" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif" color="#{{'DEFAULT_COLOR' | app_config}}">
+		<link rel="shortcut icon" href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif">
 		<meta name="apple-mobile-web-app-title" content="{{'SITE_NAME' | app_config}}">
 		<meta name="application-name" content="{{'SITE_NAME' | app_config}}">
 		<meta name="msapplication-TileColor" content="#{{'DEFAULT_COLOR' | app_config}}">
-		<meta name="msapplication-config" content="/assets/browserconfig.xml">
+		<meta name="msapplication-config" content="/assets/images/browserconfig.xml">
 		<meta name="theme-color" content="#{{'DEFAULT_COLOR' | app_config}}">
 
-
-
 		<link
 		rel="apple-touch-startup-image"
 		sizes="320x480"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="640x960"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-icon"
 		sizes="640x1136"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-icon"
 		sizes="750x1334"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="768x1004"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="768x1024"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="828x1792"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1024x748"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1024x768"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1125x2436"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1242x2208"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1242x2688"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1334x750"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1536x2008"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1536x2048"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1668x2224"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="1792x828"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2048x1496"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2048x1536"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2048x2732"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2208x1242"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2224x1668"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2436x1125"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2668x1242"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 		<link
 		rel="apple-touch-startup-image"
 		sizes="2737x2048"
-		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.webp?v=3"
+		href="/assets/images/{{'SITE_NAME' | app_config}}/icon.gif"
 		>
 
-
 		{% block stylesheets %}
 
 		{% if v %}
 			<style>:root{--primary:#{{v.themecolor}}}</style>
 			<link rel="stylesheet" href="/assets/css/main.css?v=120">
+			<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+			<link rel="stylesheet" href="/assets/css/default.css?v=1025">
 			<link rel="stylesheet" href="/assets/css/{{v.theme}}.css?v=118">
 			{% if v.agendaposter %}<link rel="stylesheet" href="/assets/css/agendaposter.css?v=120">{% elif v.css %}<link rel="stylesheet" href="/@{{v.username}}/css">{% endif %}
 		{% else %}
 			<style>:root{--primary:#{{'DEFAULT_COLOR' | app_config}}</style>
-			<link rel="stylesheet" href="/assets/css/main.css?v=120"><link rel="stylesheet" href="/assets/css/{{'DEFAULT_THEME' | app_config}}.css?v=118">
+			<link rel="stylesheet" href="/assets/css/main.css?v=120">
+			<link rel="stylesheet" href="/assets/css/{{'DEFAULT_THEME' | app_config}}.css?v=118">
+			<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+			<link rel="stylesheet" href="/assets/css/default.css?v=1025">
 		{% endif %}
 
 		{% endblock %}
 
 		<link href="/assets/css/fa.css?v=52" rel="stylesheet"> 
 		{% block fixedMobileBarJS %}
+
 		{% endblock %}
 
  </head>
 
- <body id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" style="{% if path != '/formatting' %}overflow-x: hidden; {% endif %}{% if v and v.background %} background:url(/assets/images/backgrounds/{{v.background}}) no-repeat center center fixed !important; background-size: cover!important; background-color: #000!important;{% endif %} {% if 'rama' in request.host %}margin-top: 29px!important;{% endif %}">
+ <body id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" class="overflow-hidden antialiased bg-cover bg-center bg-gray-900 text-gray-200" style="{% if v and v.background %} background:url(/assets/images/backgrounds/{{v.background}}){% endif %}">
 
 {% block Banner %}
-	{% if '@' not in request.path %}
-		<style>
-			.banner {
-				margin-top: -3px;
-			}
-			@media (min-width: 992px) {
-				.banner {
-					margin-top: 10px !important;
-				}
-			}
-		</style>
-		
-		<a  rel="nofollow noopener noreferrer" href="{% if 'rama' in request.host %}https://secure.transequality.org/site/Donation2?df_id=1480{% else %}/{% endif %}">
-			<img loading="lazy" class="banner" src="/assets/images/{{'SITE_NAME' | app_config}}/{% if v %}banner.webp{% else %}cached.webp{% endif %}?v=2" width="100%">
-		</a>
-	{% endif %}
 {% endblock %}
 
-{% include "header.html" %}
-
+{% include "header-tw.html" %}
 
 {% block mobileUserBanner %}
 {% endblock %}
@@ -301,10 +239,8 @@
 {% block postNav %}
 {% endblock %}
 
-<div class="container {% if request.path=='/' or '/post/' in request.path or '/comment/' in request.path %} transparent {% endif %}">
-	<div class="row justify-content-around" id="main-content-row">
-
-		<div class="col h-100 {% block customPadding %}{% if not '/message' in request.path %}custom-gutters{% endif %}{% endblock %}" id="main-content-col">
+<div class="flex h-screen pt-12 sm:pt-16 bg-gray-700">
+	<div class="w-full overflow-y-auto">
 
 			{% block desktopUserBanner %}
 			{% endblock %}
@@ -312,19 +248,29 @@
 			{% block desktopBanner %}
 			{% endblock %}
 
-			{% block PseudoSubmitForm %}
+		<div class="px-4 bg-gray-900" id="sub-header-row">
+			{% block subHeader %}
 			{% endblock %}
-
-			{% block searchText %}
-			{% endblock %}
-
-			{% block content %}
-			{% endblock %}
-
-			{% block pagenav %}
-			{% endblock %}
-
 		</div>
+
+		<div class="w-full px-4">
+			<div class="w-full max-w-screen-2xl mx-auto mb-4 px-4 grid grid-cols-12 gap-6 bg-gray-800 rounded-b-xl" id="main-content-row">
+
+				{% block searchText %}
+				{% endblock %}
+
+				{% block content %}
+				{% endblock %}
+
+				{% block pagenav %}
+				{% endblock %}
+
+				{% block sidebar %}
+				{% endblock %}
+			</div>
+		</div>
+
+		{% include "footer.html" %}
 	</div>
 </div>
 
@@ -345,23 +291,59 @@
 {% endblock %}
 
 
-<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 text-center">
-		<i class="fas fa-check-circle text-success mr-2"></i>Link copied to clipboard
-	</div>
-</div>
+<!-- Import toast notifications -->
+{% include "/toasts/toasts.html" %}
 
-<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-success text-center text-white">
-		<i class="fas fa-comment-alt-smile mr-2"></i><span id="toast-post-success-text"></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-danger 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>
-	</div>
-</div>
+{% block modals %}
+{% endblock %}
+
+{% block popovers %}
+{% endblock %}
+
+{% block scripts %}
+{% endblock %}
+
+<!-- Scripts -->
+
+<!-- Clipboard JS -->
+<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
+<script>
+	var clipboard = new ClipboardJS('.copy-link');
+	clipboard.on('success', function(e) {
+			var myToast = new bootstrap.Toast(document.getElementById('toast-success'));
+			myToast.show();
+			console.log(e);
+	});
+
+	const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+
+	const popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
+		const popoverId = popoverTriggerEl.getAttribute('data-content-id');
+		const contentEl = document.getElementById(popoverId).innerHTML;
+		return new bootstrap.Popover(popoverTriggerEl, {
+			content: contentEl,
+			html: true,
+		});
+	})
+</script>
+
+<!-- Push notifications -->
+{% if v %}
+	<script src="https://js.pusher.com/beams/1.0/push-notifications-cdn.js"></script>
+	<script>
+		const beamsClient = new PusherPushNotifications.Client({
+			instanceId: '02ddcc80-b8db-42be-9022-44c546b4dce6',
+		});		
+		beamsClient.start()
+		.then((beamsClient) => beamsClient.getDeviceId())
+		.then(() => beamsClient.addDeviceInterest('{{v.strid}}'))
+		.then(() => beamsClient.getDeviceInterests())
+		.catch(console.error);
+	</script>
+{% endif %}
+
+<script src="/assets/js/header.js?v=54"></script>
+<script src="/assets/js/fingerprint.js?v=1"></script>
 
 </body>
-
 </html>
diff --git a/files/templates/dropdowns/NavbarExtraLinks.html b/files/templates/dropdowns/NavbarExtraLinks.html
new file mode 100644
index 000000000..a4b693904
--- /dev/null
+++ b/files/templates/dropdowns/NavbarExtraLinks.html
@@ -0,0 +1,62 @@
+<div class="dropdown">
+	<button class="relative flex items-center px-3 py-2.5 rounded text-sm text-gray-500 hover:text-gray-400 focus:text-gray-200 focus:font-bold 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>
+	<ul class="dropdown-menu w-56 bg-gray-900 rounded-md rounded-t-none shadow-lg" aria-labelledby="dropdownMenuButton" x-placement="bottom-start">
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/shop">
+				<i class="fas fa-store fa-sm fa-fw mr-4"></i>Shop
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/leaderboard">
+				<i class="fas fa-trophy fa-sm fa-fw mr-4"></i>Leaderboards
+			</a>
+		</li>
+		<li>
+			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/changelog">
+				<i class="fas fa-clipboard fa-sm fa-fw mr-4"></i>Changelog
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="https://github.com/Aevann1/Drama">
+				<i class="fab fa-github fa-sm fa-fw mr-4"></i>Source Code
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/post/18459/">
+				<i class="fas fa-bug fa-sm fa-fw mr-4"></i>Report Bugs
+			</a>
+		</li>
+		<li>
+			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/discord">
+				<i class="fab fa-discord fa-sm fa-fw mr-4"></i>Discord Server
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/assets/Drama_App.apk">
+				<i class="fab fa-android fa-sm fa-fw mr-4"></i>Android App
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/archives">
+				<i class="fas fa-book fa-sm fa-fw mr-4"></i>Archives
+			</a>
+		</li>
+		<li>
+			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/rules">
+				<i class="fas fa-balance-scale fa-sm fa-fw mr-4"></i>Community Rules
+			</a>
+		</li>
+	</ul>
+</div>
\ No newline at end of file
diff --git a/files/templates/dropdowns/NavbarProfile.html b/files/templates/dropdowns/NavbarProfile.html
new file mode 100644
index 000000000..5109a8a92
--- /dev/null
+++ b/files/templates/dropdowns/NavbarProfile.html
@@ -0,0 +1,54 @@
+<div class="dropdown">
+	<button class="relative flex items-center px-3 py-2.5 rounded text-sm text-gray-500 hover:text-gray-400 focus:text-gray-200 focus:bg-gray-800 focus:shadow-inner focus:font-bold text-shadow focus:outline-none dropdown-toggle" type="button" id="dropdownProfileMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<span class="sr-only">Open user menu</span>
+        <img class="h-9 w-9 bg-white p-[3px] border border-black" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
+        <span class="text-sm font-heading pl-2">{{ v.username }}</span>
+	</button>
+	<ul class="dropdown-menu w-56 bg-gray-900 rounded-md rounded-t-none shadow-lg" aria-labelledby="dropdownProfileMenuButton" x-placement="bottom-start">
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/shop">
+				<i class="fas fa-user fa-sm fa-fw mr-4"></i>Profile
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
+				<i class="fas fa-envelope fa-sm fa-fw mr-4"></i>Inbox
+				{% if v.notifications_count %}<span class="text-red-500">{{ v.notifications_count }}</span>{% endif %}
+			</a>
+		</li>
+		<li>
+			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/@{{ v.username }}">
+				<i class="fas fa-pen fa-sm fa-fw mr-4"></i>Posts
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/@{{ v.username }}/comments">
+				<i class="fas fa-comments-alt fa-sm fa-fw mr-4"></i>Comments
+			</a>
+		</li>
+		<li>
+			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="https://marsey1.gumroad.com/l/tfcvri">
+				<i class="fas fa-arrow-alt-up fa-sm fa-fw mr-4"></i>Upgrade account
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="/settings">
+				<i class="fas fa-cog fa-sm fa-fw mr-4"></i>Settings
+			</a>
+		</li>
+		<li>
+			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+		</li>
+		<li>
+			<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast('/logout', '1')">
+				<i class="fas fa-power-off fa-sm fa-fw mr-4"></i>Logout
+			</button>
+		</li>
+	</ul>
+</div>
\ No newline at end of file
diff --git a/files/templates/dropdowns/SearchSorts.html b/files/templates/dropdowns/SearchSorts.html
new file mode 100644
index 000000000..dbe2db1ad
--- /dev/null
+++ b/files/templates/dropdowns/SearchSorts.html
@@ -0,0 +1,94 @@
+<div class="flex items-center space-x-2">
+	<div class="dropdown">
+		<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-lg text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsutton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			{% if t=="hour" %}<i class="fas fa-clock text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if t=="day" %}<i class="fas fa-calendar-day text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if t=="week" %}<i class="fas fa-calendar-week text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if t=="month" %}<i class="fas fa-calendar-alt text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if t=="year" %}<i class="fas fa-calendar text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if t=="all" %}<i class="fas fa-infinity text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{{t | capitalize}}
+		</button>
+		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsButton" x-placement="bottom-start">
+			<li class="{% if t=='hour' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=hour">
+					<i class="fas fa-clock fa-sm fa-fw mr-4"></i>Hour
+				</a>
+			</li>
+			<li class="{% if t=='day' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=day">
+					<i class="fas fa-calendar-day fa-sm fa-fw mr-4"></i>Day
+				</a>
+			</li>
+			<li class="{% if t=='week' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=week">
+					<i class="fas fa-calendar-week fa-sm fa-fw mr-4"></i>Week
+				</a>
+			</li>
+			<li class="{% if t=='month' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=month">
+					<i class="fas fa-calendar-alt fa-sm fa-fw mr-4"></i>Month
+				</a>
+			</li>
+			<li class="{% if t=='year' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=year">
+					<i class="fas fa-calendar fa-sm fa-fw mr-4"></i>Year
+				</a>
+			</li>
+			<li class="{% if t=='all' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=all">
+					<i class="fas fa-infinity fa-sm fa-fw mr-4"></i>All
+				</a>
+			</li>
+		</ul>
+	</div>
+	<div class="dropdown">
+		<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-lg text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsTypeButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			{% if sort=="hot" %}<i class="fas fa-fire text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if sort=="new" %}<i class="fas fa-sparkles text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if sort=="old" %}<i class="fas fa-book text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if sort=="controversial" %}<i class="fas fa-bullhorn text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{% if sort=="comments" %}<i class="fas fa-comments text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+			{{sort | capitalize}}
+		</button>
+		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsTypeButton" x-placement="bottom-start">
+			<li class="{% if sort == 'top' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=top&q={{query | urlencode}}&t={{t}}">
+					<i class="fas fa-arrow-alt-circle-up fa-sm fa-fw mr-4"></i>Top
+				</a>
+			</li>
+			<li class="{% if sort == 'bottom' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=bottom&q={{query | urlencode}}&t={{t}}}">
+					<i class="fas fa-arrow-alt-circle-down fa-sm fa-fw mr-4"></i>Bottom
+				</a>
+			</li>
+			<li class="{% if sort == 'new' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=new&q={{query | urlencode}}&t={{t}}">
+					<i class="fas fa-sparkles fa-sm fa-fw mr-4"></i>New
+				</a>
+			</li>
+			<li class="{% if sort == 'old' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=old&q={{query | urlencode}}&t={{t}}">
+					<i class="fas fa-book fa-sm fa-fw mr-4"></i>Old
+				</a>
+			</li>
+			<li class="{% if sort == 'controversial' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=fiery&q={{query | urlencode}}&t={{t}}">
+					<i class="fas fa-bullhorn fa-sm fa-fw mr-4"></i>Controversial
+				</a>
+			</li>
+			<li class="{% if sort == 'comments' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=comments&q={{query | urlencode}}&t={{t}}">
+					<i class="fas fa-comments fa-sm fa-fw mr-4"></i>Comments
+				</a>
+			</li>
+			<li class="{% if sort == 'random' %}hidden{% endif %}">
+				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=random&q={{query | urlencode}}&t={{t}}">
+					<i class="fas fa-question fa-sm fa-fw mr-4"></i>Random
+				</a>
+			</li>
+		</ul>
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/dropdowns/SubmissionSorts.html b/files/templates/dropdowns/SubmissionSorts.html
new file mode 100644
index 000000000..4bb36eb1d
--- /dev/null
+++ b/files/templates/dropdowns/SubmissionSorts.html
@@ -0,0 +1,94 @@
+			<div class="flex items-center space-x-2">
+				<div class="dropdown">
+					<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 dropdown-toggle" type="button" id="dropdownSubmissionSortButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						{% if t=="hour" %}<i class="fas fa-clock text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if t=="day" %}<i class="fas fa-calendar-day text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if t=="week" %}<i class="fas fa-calendar-week text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if t=="month" %}<i class="fas fa-calendar-alt text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if t=="year" %}<i class="fas fa-calendar text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if t=="all" %}<i class="fas fa-infinity text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{{t | capitalize}}
+					</button>
+					<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSubmissionSortButton" x-placement="bottom-start">
+						<li class="{% if t=='hour' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=hour">
+								<i class="fas fa-clock fa-sm fa-fw mr-4"></i>Hour
+							</a>
+						</li>
+						<li class="{% if t=='day' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=day">
+								<i class="fas fa-calendar-day fa-sm fa-fw mr-4"></i>Day
+							</a>
+						</li>
+						<li class="{% if t=='week' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=week">
+								<i class="fas fa-calendar-week fa-sm fa-fw mr-4"></i>Week
+							</a>
+						</li>
+						<li class="{% if t=='month' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=month">
+								<i class="fas fa-calendar-alt fa-sm fa-fw mr-4"></i>Month
+							</a>
+						</li>
+						<li class="{% if t=='year' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=year">
+								<i class="fas fa-calendar fa-sm fa-fw mr-4"></i>Year
+							</a>
+						</li>
+						<li class="{% if t=='all' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort={{sort}}&t=all">
+								<i class="fas fa-infinity fa-sm fa-fw mr-4"></i>All
+							</a>
+						</li>
+					</ul>
+				</div>
+				<div class="dropdown">
+					<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 dropdown-toggle" type="button" id="dropdownSubmissionSortTypeButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						{% if sort=="hot" %}<i class="fas fa-fire text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if sort=="new" %}<i class="fas fa-sparkles text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if sort=="old" %}<i class="fas fa-book text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if sort=="controversial" %}<i class="fas fa-bullhorn text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{% if sort=="comments" %}<i class="fas fa-comments text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
+						{{sort | capitalize}}
+					</button>
+					<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSubmissionSortTypeButton" x-placement="bottom-start">
+						<li class="{% if sort == 'hot' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=hot&t={{t}}">
+								<i class="fas fa-fire fa-sm fa-fw mr-4"></i>Hot
+							</a>
+						</li>
+						<li class="{% if sort == 'top' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=top&t={{t}}">
+								<i class="fas fa-arrow-alt-circle-up fa-sm fa-fw mr-4"></i>Top
+							</a>
+						</li>
+						<li class="{% if sort == 'bottom' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=bottom&t={{t}}">
+								<i class="fas fa-arrow-alt-circle-down fa-sm fa-fw mr-4"></i>Bottom
+							</a>
+						</li>
+						<li class="{% if sort == 'new' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=new&t={{t}}">
+								<i class="fas fa-sparkles fa-sm fa-fw mr-4"></i>New
+							</a>
+						</li>
+						<li class="{% if sort == 'old' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=old&t={{t}}">
+								<i class="fas fa-book fa-sm fa-fw mr-4"></i>Old
+							</a>
+						</li>
+						<li class="{% if sort == 'controversial' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=controversial&t={{t}}">
+								<i class="fas fa-bullhorn fa-sm fa-fw mr-4"></i>Controversial
+							</a>
+						</li>
+						<li class="{% if sort == 'comments' %}hidden{% endif %}">
+							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="?sort=comments&t={{t}}">
+								<i class="fas fa-comments fa-sm fa-fw mr-4"></i>Comments
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
\ No newline at end of file
diff --git a/files/templates/footer.html b/files/templates/footer.html
new file mode 100644
index 000000000..510a92022
--- /dev/null
+++ b/files/templates/footer.html
@@ -0,0 +1,98 @@
+<div class="w-full px-4">
+	<div class="w-full max-w-screen-2xl mx-auto flex flex-col py-4 items-start bg-gray-800 rounded-t-xl">
+		<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">
+					Noteworthy Threads
+				</h2>
+			</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">
+					Quote of the Week
+				</h2>
+				<div class="flex flex-col gap-2">
+					<div class="bg-gray-700 shadow-inner border border-gray-900 rounded-md overflow-hidden">
+						<p class="p-2 text-sm font-serif italic">
+							"Not like anything that happens on this niche website will ever matter so it's not worth caring about but is it just me or has the 1984 shit really stepped up in the past few weeks?"
+						</p>
+						<div class="p-2 bg-gray-700 border-t border-gray-800 shadow-inset-t-white-05">
+							<img src="https://i.imgur.com/47oAlsK.jpg" class="inline-block flex-shrink-0 object-cover h-9 w-9 p-[3px] bg-white border border-gray-800" alt="avatar"/>
+							<strong class="pl-1 font-heading text-sm">
+								<a href="/post/24615/not-like-anything-that-happens-on" class="text-gray-300 hover:text-gray-200">@turkey_privilege</a>
+							</strong>
+						</div>
+					</div>
+				</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">
+					Newest Members
+				</h2>
+				<ul class="flex flex-wrap gap-x-3 gap-y-2 mb-3">
+					{% for user in kek %}
+					<li class="w-10 flex-shrink-0 overflow-hidden">
+						<img src="{{ user.profile_url }}" class="object-cover h-10 w-10 rounded bg-white inner-shadow" alt="avatar"/>
+						<small class="block">{{ user.username }}</small>
+					</li>
+					{% endfor %}
+				</ul>
+				{% if not v %}
+				<div class="leading-none">
+					<a href="/signup" class="text-pink-500 font-bold text-xs">Become an rdramanaut</a>
+				</div>
+				<div class="leading-none mt-1">
+					<a href="/login" class="text-gray-500 font-bold text-xs">or log in</a>
+				</div>
+				{% 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">
+					rdrama
+				</h2>
+				<p class="mt-1 text-xs text-gray-500">
+					rdrama caters to drama in all forms such as: Real life, videos, images, gossip, rumors, news sites, Reddit, and Beyond™. There is no drama we won't touch, and we want it all.
+				</p>
+			</div>
+		</div>
+		<div class="mt-4 w-full">
+			<ul class="mx-auto max-w-2xl flex flex-col md:flex-row md:items-center md:justify-center md:space-x-3 md:divide-x md:divide-gray-700 text-xs font-medium leading-none">
+				<li>
+					<a href="#" class="text-gray-500 hover:text-gray-400">
+						About
+					</a>
+				</li>
+				<li class="mt-2 md:mt-0 md:pl-3">
+					<a href="/contact" class="text-gray-500 hover:text-gray-400">
+						Contact
+					</a>
+				</li>
+				<li class="mt-2 md:mt-0 md:pl-3">
+					<a href="#" class="text-gray-500 hover:text-gray-400">
+						Welcome Guide
+					</a>
+				</li>
+				<li class="mt-2 md:mt-0 md:pl-3">
+					<a href="/rules" class="text-gray-500 hover:text-gray-400">
+						Community Etiquette
+					</a>
+				</li>
+				<li class="mt-2 md:mt-0 md:pl-3">
+					<a href="/changelog" class="text-gray-500 hover:text-gray-400">
+						Changelog
+					</a>
+				</li>
+				<li class="mt-2 md:mt-0 md:pl-3">
+					<a href="https://github.com/Aevann1/Drama" class="text-gray-500 hover:text-gray-400">
+						GitHub
+					</a>
+				</li>
+			</ul>
+		</div>
+		<div class="w-full mt-4 px-4 text-sm text-gray-600">
+			<div class="flex flex-col md:flex-row justify-between pt-4 shadow-inset-t-white-05 border-t border-gray-900 leading-none">
+				<small>©2021 Copyright rdrama.net</small>
+				<small class="hidden md:block">Deus, rex, et bussy</small>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/header-tw.html b/files/templates/header-tw.html
new file mode 100644
index 000000000..2ab3bf536
--- /dev/null
+++ b/files/templates/header-tw.html
@@ -0,0 +1,135 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<nav class="fixed top-0 w-full bg-gray-900" style="z-index: 1030;">
+  <div class="w-full max-w-screen-2xl mx-auto grid grid-cols-12 px-8">
+    <div class="relative col-span-full flex items-center justify-between h-16">
+      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+        <!-- 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" aria-controls="mobile-menu" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+          <!--
+            Icon when menu is closed.
+
+            Heroicon name: outline/menu
+
+            Menu open: "hidden", Menu closed: "block"
+          -->
+          <svg class="block h-6 w-6" xmlns="http://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>
+          <!--
+            Icon when menu is open.
+
+            Heroicon name: outline/x
+
+            Menu open: "block", Menu closed: "hidden"
+          -->
+          <svg class="hidden h-6 w-6" xmlns="http://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="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+        <div class="flex-shrink-0 flex items-center">
+          <a href="{{ '/' if v else '/logged_out'}}">
+            <img class="block lg:hidden h-8 w-auto" src="/assets/images/Drama/drama-logo.png" alt="logo">
+            <img class="hidden lg:block h-8 w-auto" src="/assets/images/Drama/drama-logo.png" alt="logo">
+          </a>
+        </div>
+        <div class="relative hidden sm:flex flex-shrink-0 sm:ml-6">
+          <form action="/search/posts/" method="get" class="mb-0">
+            <input placeholder="Search" class="w-full text-gray-500 focus:text-gray-900 rounded border border-gray-800 bg-black focus:bg-opacity-100 focus:bg-white hover:bg-opacity-30 shadow-inner w-full px-2 py-1.5 pr-7" aria-label="Search" name="q" value="{{request.args.get('q', '')}}">
+            <i class="fas fa-search text-gray-600 absolute top-3 right-2"></i>
+          </form>
+        </div>
+        <div class="hidden md:flex items-center space-x-2 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 {{ 'text-gray-200 font-bold text-shadow' if request.path == '/' else 'text-gray-500 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 {{ 'text-gray-200 font-bold text-shadow' if request.path == '/comments' else 'text-gray-500 hover:text-gray-400' }}" aria-current="page">
+              <i class="fas fa-comments-alt fa-fw mr-2"></i>
+              Comments
+            </a>
+
+            {% include "/dropdowns/NavbarExtraLinks.html" %}
+
+            <!-- <a href="/shop" class="relative px-3 py-2.5 rounded text-sm {{ 'text-gray-200 font-bold text-shadow' if request.path == '/shop' else 'text-gray-500 hover:text-gray-400' }}">
+              <i class="fas fa-store fa-fw mr-2"></i>
+              Shop
+            </a> -->
+
+            <a href="/country-club" class="flex items-center relative px-3 py-2.5 rounded text-sm {{ 'text-gray-200 font-bold text-shadow' if request.path == '/country-club' else 'text-yellow-500 font-medium' }}">
+              <img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="15px" height="12px" class="object-contain mr-2.5"/>
+              Country Club
+            </a>
+
+        </div>
+      </div>
+      <div class="absolute inset-y-0 right-0 flex items-center space-x-3 pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+        <!-- Profile dropdown -->
+        <div class="ml-3 relative">
+          {% include "/dropdowns/NavbarProfile.html" %}
+
+          <!--
+            Dropdown menu, show/hide based on menu state.
+
+            Entering: "transition ease-out duration-100"
+              From: "transform opacity-0 scale-95"
+              To: "transform opacity-100 scale-100"
+            Leaving: "transition ease-in duration-75"
+              From: "transform opacity-100 scale-100"
+              To: "transform opacity-0 scale-95"
+          -->
+          <div class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+            <!-- Active: "bg-gray-100", Not Active: "" -->
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
+          </div>
+        </div>
+
+        <!-- Notifications -->
+        <a href="/submit" 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">
+          <span class="sr-only">Submit post</span>
+          <i class="fas fa-plus 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">
+          <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-900 flex items-center justify-center bg-red-500">
+              <span class="text-xs text-gray-100 font-bold leading-none">{{ v.notifications_count }}</span>
+            </div>
+            {% endif %}
+          </div>
+        </a>
+
+        <!-- Notifications -->
+        <button type="button" 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">
+          <span class="sr-only">View notifications</span>
+          <i class="fas fa-user-friends fa-fw"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu, show/hide based on menu state. -->
+  <div class="sm:hidden" id="mobile-menu">
+    <div class="px-2 pt-2 pb-3 space-y-1">
+      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
+
+      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
+
+      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
+
+      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
+    </div>
+  </div>
+</nav>
diff --git a/files/templates/home.html b/files/templates/home.html
index 29a4a8526..147098c7a 100644
--- a/files/templates/home.html
+++ b/files/templates/home.html
@@ -1,143 +1,38 @@
 {% extends "default.html" %}
 
-{% block desktopBanner %}
-
-{% if v %}
-	<script>
-		function fp(fp) {
-			var xhr = new XMLHttpRequest();
-			xhr.open("POST", '{{request.host_url}}fp/'+fp, true);
-			var form = new FormData()
-			form.append("formkey", formkey());
-			xhr.withCredentials=true;
-			xhr.send(form);
-		};
-
-		const fpPromise = new Promise((resolve, reject) => {
-			const script = document.createElement('script');
-			script.onload = resolve;
-			script.onerror = reject;
-			script.async = true;
-			script.src = 'https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs-pro@3/dist/fp.min.js';
-			document.head.appendChild(script);
-		})
-			.then(() => FingerprintJS.load({token: '{{environ.get("FP")}}'}));
-
-		fpPromise
-			.then(fp => fp.get())
-			.then(result => {if (result.visitorId != '{{v.fp}}') fp(result.visitorId);})
-  </script>
-{% endif %}
-  
-<div class="row" style="overflow: visible;padding-top:5px;">
-	<div class="col">
-		<div class="d-flex justify-content-between align-items-center mr-2">
-
-			{% block navbar %}
-			<div class="font-weight-bold py-3">‎</div>
-
-			<div class="d-flex align-items-center sortingbarmargin">
-				<div class="text-small font-weight-bold mr-2">‎</div>
-				<div class="dropdown dropdown-actions">
-					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						{% if t=="day" %}<i class="fas fa-calendar-day mr-1"></i>{% endif %}
-						{% if t=="week" %}<i class="fas fa-calendar-week mr-1"></i>{% endif %}
-						{% if t=="month" %}<i class="fas fa-calendar-alt mr-1"></i>{% endif %}
-						{% if t=="year" %}<i class="fas fa-calendar mr-1"></i>{% endif %}
-						{% if t=="all" %}<i class="fas fa-infinity mr-1"></i>{% endif %}
-						{{t | capitalize}}
-					</button>
-					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-						{% if not t=="hour" %}<a class="dropdown-item" href="?sort={{sort}}&t=hour"><i class="fas fa-clock mr-2"></i>Hour</a>{% endif %}
-						{% if not t=="day" %}<a class="dropdown-item" href="?sort={{sort}}&t=day"><i class="fas fa-calendar-day mr-2"></i>Day</a>{% endif %}
-						{% if not t=="week" %}<a class="dropdown-item" href="?sort={{sort}}&t=week"><i class="fas fa-calendar-week mr-2"></i>Week</a>{% endif %}
-						{% if not t=="month" %}<a class="dropdown-item" href="?sort={{sort}}&t=month"><i class="fas fa-calendar-alt mr-2"></i>Month</a>{% endif %}
-						{% if not t=="year" %}<a class="dropdown-item" href="?sort={{sort}}&t=year"><i class="fas fa-calendar mr-2"></i>Year</a>{% endif %}
-						{% if not t=="all" %}<a class="dropdown-item" href="?sort={{sort}}&t=all"><i class="fas fa-infinity mr-2"></i>All</a>{% endif %}
-					</div>
-				</div>
-
-				<div class="text-small font-weight-bold ml-3 mr-2">‎</div>
-				<div class="dropdown dropdown-actions">
-					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						{% if sort=="hot" %}<i class="fas fa-fire mr-1"></i>{% endif %}
-						{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-						{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-						{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-						{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-						{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-						{% if sort=="comments" %}<i class="fas fa-comments mr-1"></i>{% endif %}
-						{{sort | capitalize}}
-					</button>
-					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-						{% if sort != "hot" %}<a class="dropdown-item" href="?sort=hot&t={{t}}"><i class="fas fa-fire mr-2"></i>Hot</a>{% endif %}
-						{% if sort != "top" %}<a class="dropdown-item" href="?sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-						{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-						{% if sort != "new" %}<a class="dropdown-item" href="?sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-						{% if sort != "old" %}<a class="dropdown-item" href="?sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-						{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-						{% if sort != "comments" %}<a class="dropdown-item" href="?sort=comments&t={{t}}"><i class="fas fa-comments mr-2"></i>Comments</a>{% endif %}
-					</div>
-				</div>
+{% block subHeader %}
+	<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t-md">
+		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-800 to-gray-700 rounded-t-md sub-header-shadow"></div>
+		<div class="relative col-span-full flex items-center">
+			<div>
+				<h1 class="font-bold text-xl font-heading leading-normal">
+					Home
+				</h1>
+				<small class="block mt-1 text-gray-400">
+					<span class="capitalize font-bold">{{ sort }}</span>
+					posts {{ 'from all time' if t=='all' else 'in the last' }}
+					{% if t != 'all' %}<span class="font-bold">{{ t }}{% endif %}
+				</small>
+			</div>
+			<div class="ml-auto">
+				{% include "/dropdowns/SubmissionSorts.html" %}
 			</div>
-			{% endblock %}
 		</div>
 	</div>
-</div>
-
 {% endblock %}
 
-{% block PseudoSubmitForm %}
-
-<div class="row no-gutters d-none d-lg-flex mt-3 {% if not v %}mb-3{% endif %}">
-
-	<div class="col">
-		<div class="card pseudo-submit-form border">
-			<div class="card-header bg-gray-100">
-				<div class="mb-0">Create post</div>
-				<ul class="list-inline no-bullets mb-0 d-none">
-					<li class="list-inline-item active mr-4"><i class="fas fa-align-left text-gray-400"></i></li>
-					<li class="list-inline-item"><i class="fas fa-link text-gray-400"></i></li>
-				</ul>
-			</div>
-			<div class="card-body">
-				{% if v %}
-					<a href="/submit">
-						<input type="text" class="form-control"
-						placeholder="Post..." aria-label="Username"
-						aria-describedby="basic-addon1">
-					</a>
-				{% else %}
-					<a href="/signup">
-						<input type="text" class="form-control"
-						placeholder="Post..." aria-label="Username"
-						aria-describedby="basic-addon1">
-					</a>
-				{% endif %}
-			</div>
-		</div>
-	</div>
-
-</div>
+{% block desktopBanner %}
 {% endblock %}
 
 {% block content %}
+<div class="col-span-full xl:col-span-9">
 
-<div class="row no-gutters {% if listing %}mt-md-3{% elif not listing %}my-md-3{% endif %}">
+	<ul class="flex flex-col col-span-full sm:py-6 my-2.5 sm:my-0" id="posts">
+		{% include "submission_listing.html" %}
+	</ul>
 
-	<div class="col-12">
-
-		<div class="posts" id="posts">
-
-			{% include "submission_listing.html" %}
-
-		</div>
-	</div>
 </div>
 
-{% endblock %}
-
-{% block pagenav %}
 {% if listing %}
 <nav aria-label="Page navigation">
 	<ul class="pagination pagination-sm mb-0">
@@ -158,40 +53,25 @@
 	</ul>
 </nav>
 {% endif %}
+{% endblock %}
+
+<!-- Sidebar -->
+{% block sidebar %}
+	{% include "/sidebars/HomeSidebar.html" %}
+{% endblock %}
+
+{% block modals %}
+	{% if v %}
+		{% include "award_modal.html" %}
+	{% endif %}
+{% endblock %}
+
+{% block scripts %}
 
 {% if v %}
-	<script src="https://js.pusher.com/beams/1.0/push-notifications-cdn.js"></script>
-	<script>
-		const beamsClient = new PusherPushNotifications.Client({
-			instanceId: '02ddcc80-b8db-42be-9022-44c546b4dce6',
-		});		
-		beamsClient.start()
-		.then((beamsClient) => beamsClient.getDeviceId())
-		.then(() => beamsClient.addDeviceInterest('{{v.strid}}'))
-		.then(() => beamsClient.getDeviceInterests())
-		.catch(console.error);
-	</script>
+	<script src="/assets/js/award_modal.js?v=59"></script>
 {% endif %}
 
-{% if request.path == '/' and g.system and g.timestamp > session.get('tooltip_last_dismissed',0)+60*60*24 and (not g.system.endswith('/chrome') and not g.system.endswith('/other')) and not g.system.endswith('/webview') %}
-	<div id="mobile-prompt-container" class="fixed-bottom">
-		<div id="mobile-prompt" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-container="#mobile-prompt-container" data-bs-placement="top" data-bs-trigger="click" title="" data-bs-original-title="Install the {{'SITE_NAME' | app_config}} webapp by saving this page to your home screen!"></div>
-	</div>
-
-	<script>
-		if (!("standalone" in window.navigator) && window.navigator.standalone) {
-			if (window.innerWidth <= 737) {
-				document.getElementById('mobile-prompt').show()
-				document.getElementsByClassName('tooltip')[0].onclick = function(event){
-					document.getElementById('mobile-prompt').hide()
-					var xhr = new XMLHttpRequest();
-					xhr.withCredentials=true;
-					xhr.open("POST", '/dismiss_mobile_tip', true);
-					xhr.send();
-				}
-			}
-		}
-	</script>
-{% endif %}
+<script src="/assets/js/submission_listing.js?v=3"></script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/files/templates/modals/Modal2FA.html b/files/templates/modals/Modal2FA.html
new file mode 100644
index 000000000..c8e02bb7b
--- /dev/null
+++ b/files/templates/modals/Modal2FA.html
@@ -0,0 +1,66 @@
+<div class="modal fade" id="2faModal" tabindex="-1" role="dialog" aria-labelledby="2faModalTitle" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">{% if mfa_secret %}Setup two-step login{% elif mfa_secret and not v.email %}Email required for two-step login{% else %}Disable two-step login{% endif %}</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>
+			{% if mfa_secret %}
+			<div>
+				<form action="/settings/security" method="post">
+					<input type="hidden" name="formkey" value="{{v.formkey}}">
+					<input type="hidden" name="2fa_secret" value="{{mfa_secret}}">
+					<div class="modal-body">
+						<p>
+							<span class="font-weight-bold">Step 1:</span> Scan this barcode (or enter the code) using a two-factor authentication app such as Google Authenticator or Authy.
+						</p>
+						<div class="text-center mb-3">
+							<img loading="lazy" class="img-fluid" width=175 src="/2faqr/{{mfa_secret}}">
+							<pre></pre>
+							<div class="text-small text-muted">Or enter this code: {{mfa_secret}}</div>
+						</div>
+						<p>
+							<span class="font-weight-bold">Step 2:</span> Enter the six-digit code generated in the authenticator app and your {{'SITE_NAME' | app_config}} account password.
+						</p>
+						<label for="2fa_input">6-digit code</label>
+						<input type="text" class="form-control mb-2" id="2fa_input" name="2fa_token" placeholder="# # # # # #" required>
+
+						<label for="2fa_input_password">Password</label>
+						<input type="password" autocomplete="new-password" class="form-control mb-2" id="2fa_input_password" name="password" oninput="document.getElementById('enable2faButton').disabled=false" autocomplete="off" required>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Cancel</button>
+						<input id="enable2faButton" class="btn btn-primary" type="submit" value="Enable 2-step login" disabled>
+					</div>
+				</form>
+			</div>
+			{% else %}
+			<div>
+				<form action="/settings/security" method="post">
+					<input type="hidden" name="formkey" value="{{v.formkey}}">
+					<input type="hidden" name="2fa_secret" value="{{mfa_secret}}">
+					<div class="modal-body">
+
+						<div class="alert alert-warning" role="alert">
+							<i class="fas fa-info-circle"></i>
+							To disable two-step login, please enter your {{'SITE_NAME' | app_config}} account password and the 6-digit code generated in your authentication app. If you no longer have your two-step device, <a href="/lost_2fa">click here</a>.
+						</div>
+
+						<label for="2fa_input_password">Password</label>
+						<input type="password" autocomplete="new-password" class="form-control mb-2" id="2fa_input_password" name="password" autocomplete="off" required>
+
+						<label for="2fa_input">6-digit code</label>
+						<input type="text" class="form-control mb-2" id="2fa_input" name="2fa_remove" placeholder="# # # # # #" oninput="document.getElementById('disable2faButton').disabled=false" required>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Cancel</button>
+						<input id="disable2faButton" class="btn btn-primary" type="submit" value="Disable 2-step login" disabled>
+					</div>
+				</form>
+			</div>
+			{% endif %}
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/modals/ModalCommentActions.html b/files/templates/modals/ModalCommentActions.html
new file mode 100644
index 000000000..48acf8e41
--- /dev/null
+++ b/files/templates/modals/ModalCommentActions.html
@@ -0,0 +1,87 @@
+<div class="modal fade md:hidden" id="actionsModal-{{c.id}}" tabindex="-1" role="dialog" aria-labelledby="actionsModalTitle" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title h6">More options</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">
+				<ul class="list-group comment-actions">
+
+					<a href="/votes?link={{c.fullname}}"><li class="list-group-item"><i class="fas fa-arrows-v"></i>Votes</li></a>
+
+					{% if v %}
+						<a class="list-group-item" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#awardModal" onclick="awardModal('/comment/{{c.id}}/awards')"><i class="fas fa-gift" aria-hidden="true"></i>Give Award</a>
+
+						<a id="save2-{{c.id}}" class="list-group-item {% if c.id in v.saved_comment_idlist() %}hidden{% endif %}" href="javascript:void(0)" data-bs-dismiss="modal" onclick="post_toast2('/save_comment/{{c.id}}','save2-{{c.id}}','unsave2-{{c.id}}')"><i class="fas fa-save"></i>Save</a>
+
+						<a id="unsave2-{{c.id}}" class="list-group-item {% if c.id not in v.saved_comment_idlist() %}hidden{% endif %}" href="javascript:void(0)" onclick="post_toast2('/unsave_comment/{{c.id}}','save2-{{c.id}}','unsave2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-save"></i>Unsave</a>
+					{% endif %}
+
+					<a href="javascript:void(0);" role="button" class="list-group-item copy-link" data-bs-dismiss="modal" data-clipboard-text="{% if 'rama' in request.host %}https://dogpill.life{{c.permalink}}{% else %}{{c.permalink | full_link}}{% endif %}?context=10#context"><i class="fas fa-copy"></i>Copy link</a>
+
+					<a class="list-group-item" {% if v %} href="{{c.permalink}}?context=10#context" {% else %} href="/logged_out{{c.permalink}}?context=10#context" {% endif %}><i class="fas fa-dna"></i>Context</a>
+
+					<a href="javascript:void(0)" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportCommentModal" onclick="report_commentModal('{{c.id}}','{{c.author.username}}')" class="list-group-item"><i class="fas fa-flag"></i>Report</a>
+
+					{% if v and c.parent_submission and c.author_id==v.id %}
+						<a href="javascript:void(0)" data-bs-dismiss="modal" onclick="toggleEdit('{{c.id}}')" class="list-group-item"><i class="fas fa-edit"></i>Edit</a>
+
+						{% if c.deleted_utc > 0 %}
+							<a href="javascript:void(0)" onclick="post_toast('/undelete/comment/{{c.id}}')" data-bs-dismiss="modal" class="list-group-item"><i class="fas fa-trash-alt"></i>Undelete</a>
+						{% else %}
+							<a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#deleteCommentModal" onclick="delete_commentModal('{{c.id}}')" class="list-group-item"><i class="fas fa-trash-alt"></i>Delete</a>
+						{% endif %}
+					{% endif %}
+
+					{% if v and c.post and (v.admin_level >= 1 or v.id == c.post.author_id) and c.level == 1 %}
+						<a id="pin2-{{c.id}}" class="list-group-item {% if c.is_pinned %}hidden{% endif %} text-info" href="javascript:void(0)" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast2('/pin_comment/{{c.id}}','pin2-{{c.id}}','unpin2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-info"></i>Pin</a>
+						<a id="unpin2-{{c.id}}" class="list-group-item {% if not c.is_pinned %}hidden{% endif %} text-info" href="javascript:void(0)" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast2('/pin_comment/{{c.id}}','pin2-{{c.id}}','unpin2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-info"></i>Unpin</a>
+					{% endif %}
+
+					{% if v %}
+						{% if v.admin_level>=1 and v.id==c.author_id %}
+							<a id="distinguish2-{{c.id}}" class="list-group-item {% if c.distinguish_level %}hidden{% endif %} text-info" href="javascript:void(0)" onclick="post_toast2('/distinguish_comment/{{c.id}}','distinguish2-{{c.id}}','undistinguish2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-id-badge text-info"></i>Distinguish</a>
+							<a id="undistinguish2-{{c.id}}" class="list-group-item {% if not c.distinguish_level %}hidden{% endif %} text-info" href="javascript:void(0)" onclick="post_toast2('/distinguish_comment/{{c.id}}','distinguish2-{{c.id}}','undistinguish2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-id-badge text-info"></i>Undistinguish</a>
+						{% endif %}
+						{% if v.admin_level>=3 %}
+							{% if "/reported/" in request.path %}
+								<a class="list-group-item text-danger" href="javascript:void(0)" onclick="removeComment2('{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-ban text-danger"></i>Remove</a>
+								<a class="list-group-item text-success" href="javascript:void(0)" onclick="approveComment2('{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-check text-success"></i>Approve</a>
+							{% else %}
+								<a id="remove2-{{c.id}}" class="{% if c.is_banned %}hidden{% endif %} list-group-item text-danger" href="javascript:void(0)" onclick="removeComment2('{{c.id}}','approve2-{{c.id}}','remove2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-ban text-danger"></i>Remove</a>
+								<a id="approve2-{{c.id}}" class="{% if not c.is_banned %}hidden{% endif %} list-group-item text-success" href="javascript:void(0)" onclick="approveComment2('{{c.id}}','approve2-{{c.id}}','remove2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-check text-success"></i>Approve</a>
+							{% endif %}
+						{% endif %}
+						{% if v.admin_level >=4 and c.oauth_app %}
+							<a href="{{c.oauth_app.permalink}}/comments" class="list-group-item text-info" ><i class="fas fa-code text-info"></i>API App</a>
+						{% endif %}
+
+						{% if not v.id==c.author_id and not (c.post and c.post.award_count("ghosts")) %}
+							<a id="unblock2-{{c.id}}" data-bs-dismiss="modal" class="text-success list-group-item {% if not c.is_blocking %}hidden{% endif %}" href="javascript:void(0)" onclick="post_toast2('/settings/unblock?username={{c.author.username}}','block2-{{c.id}}','unblock2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye-slash text-success"></i>Unblock user</a>
+
+							<a id="prompt2-{{c.id}}" data-bs-dismiss="modal" class="blockuser list-group-item hidden text-danger" href="javascript:void(0)" onclick="post_toast2('/settings/block?username={{c.author.username}}','prompt2-{{c.id}}','unblock2-{{c.id}}')"><i class="fas fa-eye-slash fa-fw text-danger"></i>Are you sure?</a>
+
+							<a id="block2-{{c.id}}" class="{% if c.is_blocking %}hidden{% endif %} list-group-item text-danger" href="javascript:void(0)" onclick="document.getElementById('block2-{{c.id}}').classList.toggle('hidden');document.getElementById('prompt2-{{c.id}}').classList.toggle('hidden');"><i class="fas fa-eye-slash fa-fw text-danger"></i>Block user</a>
+						{% endif %}
+					{% endif %}
+
+					{% if v and c.parent_submission and (c.author_id==v.id or v.admin_level > 0) %}
+						<a id="mark2-{{c.id}}" class="{% if c.over_18 %}hidden{% endif %} list-group-item text-danger" href="javascript:void(0)" onclick="post_toast2('/toggle_comment_nsfw/{{c.id}}','mark2-{{c.id}}','unmark2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye-evil text-danger"></i>Mark +18</a>
+						<a id="unmark2-{{c.id}}" class="{% if not c.over_18 %}hidden{% endif %} list-group-item text-danger" href="javascript:void(0)" onclick="post_toast2('/toggle_comment_nsfw/{{c.id}}','mark2-{{c.id}}','unmark2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye-evil text-danger"></i>Unmark +18</a>
+					{% endif %}
+
+					{% if v and (c.post and v.admin_level == 6) %}
+						{% if c.author_id != v.id %}
+							<a id="ban2-{{c.id}}" class="{% if c.author.is_suspended %}hidden{% endif %} list-group-item text-danger" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/comment/{{c.id}}', '{{ c.author.id }}', '{{c.author.username}}')" href="javascript:void(0)"><i class="fas fa-user-slash text-danger fa-fw"></i>Ban user</a>
+							<a id="unban2-{{c.id}}" class="{% if not c.author.is_suspended %}hidden{% endif %} list-group-item text-success" href="javascript:void(0)" onclick="post_toast2('/unban_user/{{c.author_id}}','ban2-{{c.id}}','unban2-{{c.id}}')" data-bs-dismiss="modal"><i class="fas fa-user-minus fa-fw text-success"></i>Unban user</a>
+						{% endif %}
+					{% endif %}	
+
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/modals/ModalDeleteAccount.html b/files/templates/modals/ModalDeleteAccount.html
new file mode 100644
index 000000000..791539484
--- /dev/null
+++ b/files/templates/modals/ModalDeleteAccount.html
@@ -0,0 +1,47 @@
+<div class="modal fade" id="deleteAccountModal" tabindex="-1" role="dialog" aria-labelledby="deleteAccountModal" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">Delete your {{'SITE_NAME' | app_config}} account</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="" id="deleteFormContainer">
+				<form id="deleteAccountForm" method="post" action="/settings/delete_account">
+					<input type="hidden" name="formkey" value="{{v.formkey}}">
+					<div class="modal-body body">
+
+						<div class="d-lg-flex">
+
+							<label for="delete-password" class="w-lg-25" id="email-password-label">Password</label>
+
+							<div class="w-lg-100">
+
+								<input autocomplete="new-password" type="password" class="form-control mb-2" id="delete-password" name="password" required>
+
+							</div>
+
+						</div>
+
+						{% if v.mfa_secret %}
+						<div class="d-lg-flex mt-3">
+
+							<label for="delete-mfa" class="w-lg-25" id="email-password-label">Two-Factor Code</label>
+
+							<div class="w-lg-100">
+
+								<input autocomplete="new-password" type="text" class="form-control mb-2" id="delete-mfa" name="twofactor" required>
+
+							</div>
+
+						</div>
+						{% endif %}
+
+					</div>
+				</form>
+			</div>
+		</div>
+
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/modals/ModalSubmissionActions.html b/files/templates/modals/ModalSubmissionActions.html
new file mode 100644
index 000000000..de719a910
--- /dev/null
+++ b/files/templates/modals/ModalSubmissionActions.html
@@ -0,0 +1,103 @@
+<div class="modal fade modal-sm-bottom d-md-none" id="actionsModal" tabindex="-1" role="dialog" aria-labelledby="actionsModalTitle" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header p-3">
+				<h5 class="col modal-title text-center h6">More options</h5>
+				<button type="button" class="close position-absolute py-3" style="right: 1rem;" data-bs-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true"><i class="fas fa-times-circle text-gray-500"></i></span>
+				</button>
+			</div>
+			<div class="modal-body">
+				<ul class="list-group post-actions">
+					<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportPostModal" onclick="report_postModal('{{p.id}}')"><i class="far fa-flag text-center text-muted mr-3"></i>Report</button>
+
+					{% if v and (v.id==p.author_id or v.admin_level==6 and v.id in [1,28,995,2513]) %}
+						<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-dismiss="modal" onclick="togglePostEdit('{{p.id}}')"><i class="far fa-edit text-center text-muted mr-3"></i>Edit</button>
+					{% endif %}
+
+					{% if v and v.id==p.author_id %}
+						{% if p.private %}
+							<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast('/publish/{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-globe text-center text-muted mr-3"></i>Publish</button>
+						{% endif %}
+
+						<button id="pin-profile2-{{p.id}}" class="{% if p.is_pinned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-muted text-left" href="javascript:void(0)" onclick="post_toast2('/pin/{{p.id}}','pin-profile2-{{p.id}}','unpin-profile2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Pin to profile</button>
+						<button id="unpin-profile2-{{p.id}}" class="{% if not p.is_pinned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-muted text-left" href="javascript:void(0)" onclick="post_toast2('/pin/{{p.id}}','pin-profile2-{{p.id}}','unpin-profile2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Unpin from profile</button>
+
+						{% if p.deleted_utc > 0 %}
+							<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast('/undelete_post/{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-trash-alt text-center text-muted mr-3"></i>Undelete</button>
+						{% else %}
+							<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#deletePostModal" onclick="delete_postModal('{{p.id}}')"><i class="far fa-trash-alt text-center text-muted mr-3"></i>Delete</button>
+						{% endif %}
+					{% endif %}
+
+					<a class="btn-block" href="/votes?link={{p.fullname}}"><button class="nobackground btn btn-link btn-block btn-lg text-left text-muted"><i class="fas fa-arrows-v text-center text-muted mr-3"></i>Votes</button></a>
+
+					{% if v %}
+						<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#awardModal" onclick="awardModal('/post/{{p.id}}/awards')"><i class="fas fa-gift text-center text-muted mr-3"></i>Give Award</button>
+					{% endif %}
+
+					{% if v %}
+						<button id="subscribe2-{{p.id}}" class="{% if p.id in v.subscribed_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/subscribe/{{p.id}}','subscribe2-{{p.id}}','unsubscribe2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye text-center text-muted mr-3"></i>Subscribe</button>
+
+						<button id="unsubscribe2-{{p.id}}" class="{% if not p.id in v.subscribed_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/unsubscribe/{{p.id}}','subscribe2-{{p.id}}','unsubscribe2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye-slash text-center text-muted mr-3"></i>Unsubscribe</button>
+					{% endif %}
+
+					{% if v %}
+						<button id="save2-{{p.id}}" class="{% if p.id in v.saved_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/save_post/{{p.id}}','save2-{{p.id}}','unsave2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-save text-center text-muted mr-3"></i>Save</button>
+						<button id="unsave2-{{p.id}}" class="{% if p.id not in v.saved_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/unsave_post/{{p.id}}','save2-{{p.id}}','unsave2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-save text-center text-muted mr-3"></i>Unsave</button>
+
+						{% if v.admin_level >=3 or v.id == p.author.id and v.paid_dues %}
+							<button id="club2-{{p.id}}" class="{% if p.club %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-info text-left" href="javascript:void(0)" onclick="post_toast2('/toggle_club/{{p.id}}','club2-{{p.id}}','unclub2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye-slash mr-3"></i>Mark club</button>
+							<button id="unclub2-{{p.id}}" class="{% if not p.club %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-info text-left" href="javascript:void(0)" onclick="post_toast2('/toggle_club/{{p.id}}','club2-{{p.id}}','unclub2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye mr-3"></i>Unmark club</button>
+						{% endif %}
+
+						{% if v.admin_level >=3 %}
+							<button id="pin2-{{p.id}}" class="{% if p.stickied %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/sticky/{{p.id}}','pin2-{{p.id}}','unpin2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Pin</button>
+							<button id="unpin2-{{p.id}}" class="{% if not p.stickied %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/sticky/{{p.id}}','pin2-{{p.id}}','unpin2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Unpin</button>
+							{% if v==p.author %}
+								<button id="distinguish2-{{p.id}}" class="{% if p.distinguish_level %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/distinguish/{{p.id}}','distinguish2-{{p.id}}','undistinguish2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-crown text-center mr-3"></i>Distinguish</button>
+								<button id="undistinguish2-{{p.id}}" class="{% if not p.distinguish_level %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/distinguish/{{p.id}}','distinguish2-{{p.id}}','undistinguish2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-crown text-center mr-3"></i>Undistinguish</button>
+							{% endif %}
+
+							{% if "/reported/" in request.path %}
+								<button class="nobackground btn btn-link btn-block btn-lg text-danger text-left" href="javascript:void(0)" onclick="post_toast('/ban_post/{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-ban text-center mr-3"></i>Remove</button>
+								<button class="nobackground btn btn-link btn-block btn-lg text-success text-left" href="javascript:void(0)" onclick="post_toast('/unban_post/{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-check text-center mr-3"></i>Approve</button>
+							{% else %}
+								<button id="remove2-{{p.id}}" class="{% if p.is_banned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-danger text-left" href="javascript:void(0)" onclick="post_toast2('/ban_post/{{p.id}}','remove2-{{p.id}}','approve2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-ban text-center mr-3"></i>Remove</button>
+								<button id="approve2-{{p.id}}" class="{% if not p.is_banned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-success text-left"  href="javascript:void(0)" onclick="post_toast2('/unban_post/{{p.id}}','remove2-{{p.id}}','approve2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-check text-center mr-3"></i>Approve</button>
+							{% endif %}
+						{% endif %}
+
+						{% if v.admin_level >=4 and p.oauth_app %}
+							<a href="{{p.oauth_app.permalink}}"><button class="nobackground btn btn-link btn-block btn-lg text-muted text-left"><i class="far fa-code text-center text-info mr-3"></i>API App</button></a>
+						{% endif %}
+
+					{% endif %}
+
+					{% if v and v.id != p.author_id and not p.award_count('ghosts') %}
+						<button id="unblock2-{{p.id}}" class="nobackground btn btn-link btn-block btn-lg text-success text-left{% if not p.is_blocking %} d-none{% endif %}" data-bs-dismiss="modal" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','block2-{{p.id}}','unblock2-{{p.id}}')"><i class="fas fa-eye mr-3 text-success"></i>Unblock user</button>
+
+						<button id="prompt2-{{p.id}}" class="blockuser nobackground btn btn-link btn-block btn-lg text-danger text-left d-none" data-bs-dismiss="modal" onclick="post_toast2('/settings/block?username={{p.author.username}}','prompt2-{{p.id}}','unblock2-{{p.id}}')"><i class="fas fa-eye-slash mr-3 text-danger"></i>Are you sure?</button>
+						
+						<button id="block2-{{p.id}}" class="blockuser nobackground btn btn-link btn-block btn-lg text-danger text-left{% if p.is_blocking %} d-none{% endif %}" onclick="document.getElementById('block2-{{p.id}}').classList.toggle('d-none');document.getElementById('prompt2-{{p.id}}').classList.toggle('d-none');"><i class="fas fa-eye-slash mr-3 text-danger"></i>Block user</button>
+					{% endif %}
+
+					{% if v and (v.id==p.author_id or v.admin_level>=3) %}
+						<button id="mark2-{{p.id}}" class="{% if p.over_18 %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-danger" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark2-{{p.id}}','unmark2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-eye-evil text-center text-danger mr-3"></i>Mark +18</button>
+						<button id="unmark2-{{p.id}}" class="{% if not p.over_18 %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-danger" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark2-{{p.id}}','unmark2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-eye-evil text-center text-danger mr-3"></i>Unmark +18</button>
+					{% endif %}
+
+					{% if not v.id==p.author_id and v.admin_level == 1 %}
+						<button id="sex-user-{{p.id}}" class="list-inline-item{% if p.is_blocking %} d-none{% endif %} text-danger" href="javascript:void(0)" onclick="post_toast2('/settings/block?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-user-slash text-danger"></i>Ban user</button>
+						<button id="unsex-user-{{p.id}}" class="list-inline-item{% if not p.is_blocking %} d-none{% endif %} text-success" href="javascript:void(0)" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-user-slash text-success"></i>Unban user</button>
+					{% endif %}
+
+					{% if v and v.admin_level == 6 and v.id!=p.author_id %}
+						<button id="ban2-{{p.id}}" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/post/{{p.id}}', '{{ p.author.id }}', '{{p.author.username}}')" class="{% if p.author.is_suspended %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-danger text-left" href="javascript:void(0)"><i class="fas fa-user-minus mr-3"></i>Ban user</button>
+						<button id="unban2-{{p.id}}" class="{% if not p.author.is_suspended %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-success text-left" href="javascript:void(0)" onclick="post_toast2('/unban_user/{{p.author_id}}','ban2-{{p.id}}','unban2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-user-minus mr-3"></i>Unban user</button>
+					{% endif %}
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/modals/ModalSubmissionListingActions.html b/files/templates/modals/ModalSubmissionListingActions.html
new file mode 100644
index 000000000..0140e4643
--- /dev/null
+++ b/files/templates/modals/ModalSubmissionListingActions.html
@@ -0,0 +1,99 @@
+<div class="modal fade modal-sm-bottom d-md-none" id="actionsModal-{{p.id}}" tabindex="-1" role="dialog" aria-labelledby="actionsModalTitle" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header p-3">
+				<h5 class="col modal-title text-center h6">More options</h5>
+				<button type="button" class="close position-absolute py-3" style="right: 1rem;" data-bs-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true"><i class="fas fa-times-circle text-gray-500"></i></span>
+				</button>
+			</div>
+			<div class="modal-body">
+				<ul class="list-group post-actions">
+					<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportPostModal" onclick="report_postModal('{{p.id}}')"><i class="far fa-flag text-center text-muted mr-3"></i>Report</button>
+					{% if v and v.id==p.author_id %}
+						{% if p.private %}
+						<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast('/publish/{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-globe text-center text-muted mr-3"></i>Publish</button>
+						{% endif %}
+
+						<button id="pin-profile2-{{p.id}}" class="{% if p.is_pinned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-muted text-left"href="javascript:void(0)" onclick="post_toast2('/pin/{{p.id}}','pin-profile2-{{p.id}}','unpin-profile2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Pin to profile</button>
+						<button id="unpin-profile2-{{p.id}}" class="{% if not p.is_pinned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-muted text-left" href="javascript:void(0)" onclick="post_toast2('/pin/{{p.id}}','pin-profile2-{{p.id}}','unpin-profile2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Unpin from profile</button>
+
+						{% if p.deleted_utc > 0 %}
+							<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast('/undelete_post/{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-trash-alt text-center text-muted mr-3"></i>Undelete</button>
+						{% else %}
+							<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#deletePostModal" onclick="delete_postModal('{{p.id}}')"><i class="far fa-trash-alt text-center text-muted mr-3"></i>Delete</button>
+						{% endif %}
+					{% endif %}
+
+					<a class="btn-block" href="/votes?link={{p.fullname}}"><button class="nobackground btn btn-link btn-block btn-lg text-left text-muted"><i class="fas fa-arrows-v text-center text-muted mr-3"></i>Votes</button></a>
+
+					{% if v %}
+						<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#awardModal" onclick="awardModal('/post/{{p.id}}/awards')"><i class="fas fa-gift text-center text-muted mr-3"></i>Give Award</button>
+					{% endif %}
+
+					{% if v %}
+						<button id="subscribe2-{{p.id}}" class="{% if p.id in v.subscribed_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/subscribe/{{p.id}}','subscribe2-{{p.id}}','unsubscribe2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye text-center text-muted mr-3"></i>Subscribe</button>
+
+						<button id="unsubscribe2-{{p.id}}" class="{% if not p.id in v.subscribed_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/unsubscribe/{{p.id}}','subscribe2-{{p.id}}','unsubscribe2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye-slash text-center text-muted mr-3"></i>Unsubscribe</button>
+					{% endif %}
+
+					{% if v %}
+						<button id="save2-{{p.id}}" class="{% if p.id in v.saved_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/save_post/{{p.id}}','save2-{{p.id}}','unsave2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-save text-center text-muted mr-3"></i>Save</button>
+						<button id="unsave2-{{p.id}}" class="{% if not p.id in v.saved_idlist() %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-muted" href="javascript:void(0)" onclick="post_toast2('/unsave_post/{{p.id}}','save2-{{p.id}}','unsave2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-save text-center text-muted mr-3"></i>Unsave</button>
+
+						{% if v.admin_level >=3 or v.id == p.author.id and v.paid_dues %}
+							<button id="club2-{{p.id}}" class="{% if p.club %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-info text-left" href="javascript:void(0)" onclick="post_toast2('/toggle_club/{{p.id}}','club2-{{p.id}}','unclub2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye-slash mr-3"></i>Mark club</button>
+							<button id="unclub2-{{p.id}}" class="{% if not p.club %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-info text-left" href="javascript:void(0)" onclick="post_toast2('/toggle_club/{{p.id}}','club2-{{p.id}}','unclub2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-eye mr-3"></i>Unmark club</button>
+						{% endif %}
+
+						{% if v.admin_level >=3 %}
+							<button id="pin2-{{p.id}}" class="{% if p.stickied %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/sticky/{{p.id}}','pin2-{{p.id}}','unpin2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Pin</button>
+							<button id="unpin2-{{p.id}}" class="{% if not p.stickied %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/sticky/{{p.id}}','pin2-{{p.id}}','unpin2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-thumbtack fa-rotate--45 text-center mr-3"></i>Unpin</button>
+							{% if v==p.author %}
+								<button id="distinguish2-{{p.id}}" class="{% if p.distinguish_level %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/distinguish/{{p.id}}','distinguish2-{{p.id}}','undistinguish2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-crown text-center mr-3"></i>Distinguish</button>
+								<button id="undistinguish2-{{p.id}}" class="{% if not p.distinguish_level %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left" href="javascript:void(0)" onclick="post_toast2('/distinguish/{{p.id}}','distinguish2-{{p.id}}','undistinguish2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-crown text-center mr-3"></i>Undistinguish</button>
+							{% endif %}
+
+							{% if "/reported/" in request.path %}
+								<button class="nobackground btn btn-link btn-block btn-lg text-danger text-left" href="javascript:void(0)" onclick="post_toast('/ban_post/{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-ban text-center mr-3"></i>Remove</button>
+								<button class="nobackground btn btn-link btn-block btn-lg text-success text-left" href="javascript:void(0)" onclick="post_toast('/unban_post/{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-check text-center mr-3"></i>Approve</button>
+							{% else %}
+								<button id="remove2-{{p.id}}" class="{% if p.is_banned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-danger text-left" href="javascript:void(0)" onclick="post_toast2('/ban_post/{{p.id}}','remove2-{{p.id}}','approve2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-ban text-center mr-3"></i>Remove</button>
+								<button id="approve2-{{p.id}}" class="{% if not p.is_banned %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-success text-left"  href="javascript:void(0)" onclick="post_toast2('/unban_post/{{p.id}}','remove2-{{p.id}}','approve2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-check text-center mr-3"></i>Approve</button>
+							{% endif %}
+						{% endif %}
+
+						{% if v.admin_level >=4 and p.oauth_app %}
+							<a href="{{p.oauth_app.permalink}}"><button class="nobackground btn btn-link btn-block btn-lg text-muted text-left"><i class="far fa-code text-center text-info mr-3"></i>API App</button></a>
+						{% endif %}
+
+					{% endif %}
+
+					{% if v and v.id != p.author_id and not p.award_count('ghosts') %}
+						<button id="unblock2-{{p.id}}" class="nobackground btn btn-link btn-block btn-lg text-success text-left{% if not p.is_blocking %} d-none{% endif %}" data-bs-dismiss="modal" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','block2-{{p.id}}','unblock2-{{p.id}}')"><i class="fas fa-eye mr-3 text-success"></i>Unblock user</button>
+
+						<button id="prompt2-{{p.id}}" class="blockuser nobackground btn btn-link btn-block btn-lg text-danger text-left d-none" data-bs-dismiss="modal" onclick="post_toast2('/settings/block?username={{p.author.username}}','prompt2-{{p.id}}','unblock2-{{p.id}}')"><i class="fas fa-eye-slash mr-3 text-danger"></i>Are you sure?</button>
+						
+						<button id="block2-{{p.id}}" class="blockuser nobackground btn btn-link btn-block btn-lg text-danger text-left{% if p.is_blocking %} d-none{% endif %}" onclick="document.getElementById('block2-{{p.id}}').classList.toggle('d-none');document.getElementById('prompt2-{{p.id}}').classList.toggle('d-none');"><i class="fas fa-eye-slash mr-3 text-danger"></i>Block user</button>
+					{% endif %}
+
+					{% if v and (v.id==p.author_id or v.admin_level>=3) %}
+						<button id="mark2-{{p.id}}" class="{% if p.over_18 %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-danger" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark2-{{p.id}}','unmark2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-eye-evil text-center text-danger mr-3"></i>Mark +18</button>
+						<button id="unmark2-{{p.id}}" class="{% if not p.over_18 %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-left text-danger" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark2-{{p.id}}','unmark2-{{p.id}}')" data-bs-dismiss="modal"><i class="far fa-eye-evil text-center text-danger mr-3"></i>Unmark +18</button>
+					{% endif %}
+
+					{% if not v.id==p.author_id and v.admin_level == 1 %}
+						<button id="sex-user-{{p.id}}" class="list-inline-item{% if p.is_blocking %} d-none{% endif %} text-danger" href="javascript:void(0)" onclick="post_toast2('/settings/block?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-user-slash text-danger"></i>Ban user</button>
+						<button id="unsex-user-{{p.id}}" class="list-inline-item{% if not p.is_blocking %} d-none{% endif %} text-success" href="javascript:void(0)" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-user-slash text-success"></i>Unban user</button>
+					{% endif %}
+
+					{% if v and v.admin_level == 6 and v.id!=p.author_id %}
+						<button id="ban2-{{p.id}}" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/post/{{p.id}}', '{{ p.author.id }}', '{{p.author.username}}')" class="{% if p.author.is_suspended %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-danger text-left" href="javascript:void(0)"><i class="fas fa-user-minus mr-3"></i>Ban user</button>
+						<button id="unban2-{{p.id}}" class="{% if not p.author.is_suspended %}d-none{% endif %} nobackground btn btn-link btn-block btn-lg text-success text-left" href="javascript:void(0)" onclick="post_toast2('/unban_user/{{p.author_id}}','ban2-{{p.id}}','unban2-{{p.id}}')" data-bs-dismiss="modal"><i class="fas fa-user-minus mr-3"></i>Unban user</button>
+					{% endif %}
+
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/sidebars/HomeSidebar.html b/files/templates/sidebars/HomeSidebar.html
new file mode 100644
index 000000000..06750d028
--- /dev/null
+++ b/files/templates/sidebars/HomeSidebar.html
@@ -0,0 +1,19 @@
+<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 py-4">
+	<div class="mb-4">
+		<button class="group flex items-center justify-between w-full px-4 py-3 bg-gradient-to-t hover:from-pink-700 hover:to-pink-800 border border-gray-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-base font-medium text-gray-300 font-bold active:shadow-inner active:outline-none from-pink-800 to-pink-700">
+			Submit drama<i class="fas fa-arrow-alt-right"></i>
+		</button>
+	</div>
+	<div class="mb-4">
+		<h2 class="ml-2 font-bold text-xl font-heading leading-normal mb-2">
+			Commission a Marsey
+		</h2>
+		<div class="w-full h-56 shadow border-gray-900 overflow-hidden">
+			<img class="w-full h-full flex-shrink-0 object-cover" src="https://i.imgur.com/m5FVyEX.jpeg">
+		</div>
+		<p class="text-xs text-gray-500 mt-1">
+
+		</p>
+		<!-- Icons -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/sidebars/SettingsSidebar.html b/files/templates/sidebars/SettingsSidebar.html
new file mode 100644
index 000000000..8fccc3be1
--- /dev/null
+++ b/files/templates/sidebars/SettingsSidebar.html
@@ -0,0 +1,34 @@
+<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 py-4">
+	<div class="flex flex-col space-y-4">
+		<div class="flex flex-col rounded-md border border-gray-900 divide-y divide-gray-900 overflow-hidden">
+			<a href="/settings/profile" class="text-left block w-full px-4 py-3 text-shadow-t text-base font-medium text-gray-300 hover:text-gray-200 text-decoration-none active:text-gray-500 active:outline-none {{ 'bg-gray-900 bg-opacity-40 shadow-inner' if request.path == '/settings/profile' else 'bg-gray-700 hover:bg-gray-800 shadow-inset-t-white-10' }}">
+				<i class="fas fa-user fa-fw mr-1"></i>
+				Profile
+			</a>
+			<a href="/settings/security" class="text-left block w-full px-4 py-3 text-shadow-t text-base font-medium text-gray-300 hover:text-gray-200 text-decoration-none active:text-gray-500 active:outline-none {{ 'bg-gray-900 bg-opacity-40 shadow-inner' if request.path == '/settings/security' else 'bg-gray-700 hover:bg-gray-800 shadow-inset-t-white-10' }}">
+				<i class="fas fa-lock-alt fa-fw mr-1"></i>
+				Security
+			</a>
+			<a href="/settings/content" class="text-left block w-full px-4 py-3 text-shadow-t text-base font-medium text-gray-300 hover:text-gray-200 text-decoration-none active:text-gray-500 active:outline-none {{ 'bg-gray-900 bg-opacity-40 shadow-inner' if request.path == '/settings/content' else 'bg-gray-700 hover:bg-gray-800 shadow-inset-t-white-10' }}">
+				<i class="fas fa-glasses fa-fw mr-1"></i>
+				Content
+			</a>
+		</div>
+		<div class="flex flex-col rounded-md border border-gray-900 divide-y divide-gray-900 overflow-hidden">
+			<a href="/settings/css" class="text-left block w-full px-4 py-3 text-shadow-t text-base font-medium text-gray-300 hover:text-gray-200 text-decoration-none active:text-gray-500 active:outline-none {{ 'bg-gray-900 bg-opacity-40 shadow-inner' if request.path == '/settings/css' else 'bg-gray-700 hover:bg-gray-800 shadow-inset-t-white-10' }}">
+				<i class="fas fa-wrench fa-fw mr-1"></i>
+				Customization
+			</a>
+		</div>
+		<div class="flex flex-col rounded-md border border-gray-900 divide-y divide-gray-900 overflow-hidden">
+			<a href="/settings/blocks" class="text-left block w-full px-4 py-3 text-shadow-t text-base font-medium text-gray-300 hover:text-gray-200 text-decoration-none active:text-gray-500 active:outline-none {{ 'bg-gray-900 bg-opacity-40 shadow-inner' if request.path == '/settings/blocks' else 'bg-gray-700 hover:bg-gray-800 shadow-inset-t-white-10' }}">
+				<i class="fas fa-user-slash fa-fw mr-1"></i>
+				Blocked
+			</a>
+			<a href="/settings/apps" class="text-left block w-full px-4 py-3 text-shadow-t text-base font-medium text-gray-300 hover:text-gray-200 text-decoration-none active:text-gray-500 active:outline-none {{ 'bg-gray-900 bg-opacity-40 shadow-inner' if request.path == '/settings/apps' else 'bg-gray-700 hover:bg-gray-800 shadow-inset-t-white-10' }}">
+				<i class="fas fa-cogs fa-fw mr-1"></i>
+				Apps
+			</a>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/sidebars/SubmissionSidebar.html b/files/templates/sidebars/SubmissionSidebar.html
new file mode 100644
index 000000000..fd30eff96
--- /dev/null
+++ b/files/templates/sidebars/SubmissionSidebar.html
@@ -0,0 +1,152 @@
+<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex flex-col flex-shrink-0 py-4">
+	<div v-cloak class="flex flex-col rounded-md border border-gray-900 overflow-hidden mb-4">
+		{% if v %}
+		<button @click="store.vote(1)" class="group flex justify-between w-full px-4 py-3 bg-gradient-to-t hover:from-yellow-500 hover:to-yellow-600 border-b border-gray-900 rounded-t-md text-shadow-t shadow-inset-t-white-10 text-base font-medium text-gray-300 active:text-yellow-500 active:shadow-inner active:outline-none" v-bind:class="[[ store.voteType === 1 ? 'from-yellow-600 to-yellow-500' : 'from-gray-700 to-gray-700']]">
+			<span>
+				🕋 Halal
+			</span>
+			<span class="leading-none ml-3 px-2 py-1 border rounded text-sm font-bold group-hover:bg-yellow-700 group-hover:border-yellow-700" style="border-top-color: rgba(0, 0, 0, 0.07);" v-bind:class="[[ store.voteType === 1 ? 'bg-yellow-700 border-yellow-700' : 'border-gray-800 bg-gray-800']]">
+				[[ store.voteType === 1 ? store.ups + 1 : store.ups ]]
+			</span>
+		</button>
+		{% if environ.get('DISABLE_DOWNVOTES') != '1' %}
+		<button v-cloak @click="store.vote(-1)" class="group flex justify-between w-full px-4 py-3 bg-gradient-to-t hover:from-pink-700 hover:to-pink-800 rounded-b-md text-shadow-t shadow-inset-t-white-10 text-base font-medium text-gray-300 active:text-pink-500 active:shadow-inner active:outline-none" v-bind:class="[[ store.voteType === -1 ? 'from-pink-800 to-pink-700' : 'from-gray-800 to-gray-700']]">
+			<span>
+				🐷 Haram
+			</span>
+			<span class="leading-none ml-3 px-2 py-1 border rounded text-sm font-bold group-hover:bg-pink-800 group-hover:border-pink-800" style="border-top-color: rgba(0, 0, 0, 0.07);" v-bind:class="[[ store.voteType === -1 ? 'bg-pink-800 border-pink-800' : 'border-gray-800 bg-gray-800']]">
+				[[ store.voteType === -1 ? store.downs + 1 : store.downs ]]
+			</span>
+		</button>
+		{% endif %}
+		{% endif %}
+	</div>
+	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-900 shadow-inset-t-white-05"/>
+	<div>
+		<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">
+			Accolades
+		</h2>
+		<!-- Give awards if none -->
+		{% if not p.awards %}
+		<p class="text-sm text-gray-500">No awards earned yet...</p>
+		<button class="text-sm text-pink-600 hover:text-pink-500" data-bs-toggle="modal" data-bs-target="#awardModal" onclick="awardModal('/post/{{p.id}}/awards')">
+				Give award
+		</button>
+		{% endif %}
+		<!-- Icons -->
+		<ul class="flex flex-wrap gap-3 items-center">
+			<!-- 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 %}
+			<!-- Banned -->
+			{% if p.bannedfor and p.author.banned_by %}
+			<li>
+				<i class="fad fa-gavel fa-sm fa-fw 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>
+			</li>
+			{% endif %}	
+			<!-- Stickied -->
+			{% if p.stickied %}
+			<li>
+				<i id="pinned-{{p.id}}" class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom"></i>
+				<span class="font-heading text-xs text-pink-500">
+					Pinned {% if p.stickied.startswith('t:') %}until {{p.stickied[2:]}}{% else %}by @{{p.stickied}}{%endif%}
+				</span>
+			</li>
+			{% endif %}
+			<!-- Pinned -->
+			{% if p.is_pinned %}
+			<li>
+				<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Pinned to profile"></i>
+			</li>
+			{% endif %}
+			<!-- NSFW -->
+			{% if p.over_18 %}
+			<li>
+				<span class="px-2 py-1 rounded-sm bg-gradient-to-t from-red-700 to-red-500 shadow-inner text-xs text-white">+18</span>
+			</li>
+			{% endif %}
+			<!-- Private -->
+			{% if p.private %}
+			<li>
+				<span class="badge border-warning border-1 text-small-extra">Draft</span>
+			</li>
+			{% endif %}
+		</ul>
+	</div>
+	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-900 shadow-inset-t-white-05"/>
+	<div>
+		<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">
+			Link
+		</h2>
+		<input type="text" onclick="this.select()" value="https://rdrama.net/post/{{ p.id }}" class="m-0.5 p-0.5 bg-gray-900 border border-gray-900 text-xs text-gray-400 rounded-sm w-44">
+	</div>
+	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-900 shadow-inset-t-white-05"/>
+	<div>
+		<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">
+			Share Post
+		</h2>
+		<div class="flex flex-wrap items-center space-x-2">
+			<a class="leading-4 text-gray-400 hover:text-gray-300" href="">
+				<img src="/assets/images/icons/reddit.gif" class="w-7 h-7 object-contain" alt="Share this post on Reddit"/>
+			</a>
+			<a class="leading-4 text-gray-400 hover:text-gray-300" href="">
+				<img src="/assets/images/icons/twitter.gif" class="w-7 h-7 object-contain" alt="Share this post on Twitter"/>
+			</a>
+		</div>
+	</div>
+	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-900 shadow-inset-t-white-05"/>
+	<div>
+		<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">
+			DramaMetric™
+		</h2>
+		<ul class="flex flex-col space-y-1 text-gray-500">
+			<li>
+				<p class="text-sm">
+					<strong>{{ p.views }}</strong> {{ 'view' if p.views == 1 else 'views' }} on this post
+				</p>
+			</li>
+			<li>
+				<p class="text-sm">
+					<strong class="text-pink-600">{{ ups + downs }}</strong> {{ 'vote' if ups + downs == 1 else 'votes' }} on this post
+				</p>
+			</li>
+			<li>
+				<p class="text-sm">
+					<strong class="text-pink-600">{{ p.views }} {{ 'member' if p.views == 1 else 'members' }}</strong>  following this post
+				</p>
+			</li>
+		</ul>
+	</div>
+</div>
+
+{% block scripts %}
+
+<script type="module">
+	import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
+	const store = reactive({
+		ups: {{ ups }},
+		downs: {{ downs }},
+		voteType: {{ voted }},
+		count: {{ score }},
+		vote(type) {
+			this.voteType = this.voteType === type ? 0 : type;
+			const xhr = new XMLHttpRequest();
+			xhr.open("POST", "/vote/post/" + {{ p.id }} + "/" + this.voteType, true);
+			const form = new FormData()
+			form.append("formkey", formkey());
+			xhr.withCredentials=true;
+			xhr.send(form);
+		}
+	})
+	createApp({
+		store,
+		$delimiters: ['[[', ']]']
+	}).mount()
+</script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/files/templates/sidebars/SubmitSidebar.html b/files/templates/sidebars/SubmitSidebar.html
new file mode 100644
index 000000000..73066e90d
--- /dev/null
+++ b/files/templates/sidebars/SubmitSidebar.html
@@ -0,0 +1,18 @@
+<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 py-4">
+	<div class="flex flex-col space-y-4 mb-3">
+		<div class="flex items-center">
+			<input type="checkbox" class="w-5 h-5" id="nsfwCheck" name="over_18">
+			<label class="-mt-0.5 pl-1 select-none" for="nsfwCheck">+18</label>
+		</div>
+		<div class="flex items-center">
+			<input type="checkbox" class="w-5 h-5" id="privateCheck" name="private">
+			<label class="-mt-0.5 pl-1 select-none" for="privateCheck">Draft</label>
+		</div>
+		{% if v.admin_level == 6 or (v.coins >= 750 and not v.club_banned) %}
+		<div class="flex items-center">
+			<input type="checkbox" class="w-5 h-5" id="clubCheck" name="club">
+			<label class="-mt-0.5 pl-1 select-none" for="clubCheck">Country Club thread</label>
+		</div>
+		{% endif %}
+	</div>
+</div>
\ No newline at end of file
diff --git a/files/templates/submission/SubmissionActions.html b/files/templates/submission/SubmissionActions.html
new file mode 100644
index 000000000..04b1e534b
--- /dev/null
+++ b/files/templates/submission/SubmissionActions.html
@@ -0,0 +1,242 @@
+<ul class="flex items-center space-x-5 text-sm text-gray-500">
+
+	<!-- <li class="flex">
+		<button 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 %}"></button>
+		<span id="post-score-{{p.id}}" class="mx-2 score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}" data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}">{{score}}</span>
+		<button {% 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="text-muted mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></button>
+	</li> -->
+
+	{% if p.realbody(v) and '/post/' not in request.full_path  %}
+	<li>
+		<button onclick="expandText('{{p.id}}')">
+			<i class="fas fa-expand-alt fa-fw mr-2 text-expand-icon-{{p.id}}"></i>Expand
+		</button>
+	</li>
+	{% endif %}
+
+	<li>
+		<a {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
+			<i class="fas fa-comment-dots fa-fw mr-2"></i>{{ p.comment_count }} comment{{ '' if p.comment_count == 1 else 's' }}
+			<span class="text-info hidden new-comments"></span>
+		</a>
+	</li>
+
+	{% if v and (v.id==p.author_id or v.admin_level==6 and v.id in [1,28,995,2513]) and '/post/' in request.full_path %}
+	<li>
+		<button onclick="togglePostEdit('{{p.id}}')">
+			<i class="fas fa-edit fa-fw mr-2"></i>Edit
+		</button>
+	</li>
+	{% endif %}
+
+	{% if v and v.id==p.author_id %}
+	{% if p.private %}
+	<li>
+		<button onclick="post_toast('/publish/{{p.id}}')">
+			<i class="fas fa-globe fa-fw mr-2"></i>
+			Publish
+		</button>
+	<li>
+	{% endif %}
+	{% endif %}
+
+	{% 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>Give 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
+		</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
+		</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
+		</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
+		</button>
+	</li>
+	{% endif %}
+
+	<li>
+		<button class="copy-link" role="button" data-clipboard-text="{% if 'rama' in request.host %}https://dogpill.life{{p.permalink}}{% else %}{{p.permalink | full_link}}{% endif %}">
+			<i class="fas fa-link fa-fw mr-2"></i>Copy link
+		</button>
+	</li>
+
+	<li>
+		<div class="dropdown">
+			<button type="button" id="dropdownPostActions" data-bs-toggle="dropdown" aria-expanded="false">
+				<i class="fas fa-ellipsis-h fa-fw"></i>
+			</button>
+			<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownPostActions">
+				<!-- Does not require auth -->
+				<li>
+					<a href="/votes?link={{p.fullname}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700">
+						<i class="fas fa-arrows-v fa-sm fa-fw mr-4"></i>Votes
+					</a>
+				</li>
+				<li>
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700"data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportPostModal" onclick="report_postModal('{{p.id}}')">
+						<i class="fas fa-flag fa-sm fa-fw mr-4"></i>Report
+					</button>
+				</li>
+				<!-- Requires author -->
+				{% if v and v.id==p.author_id %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li class="{% if p.is_stickied %}hidden{% endif %}">
+					<button id="pin-profile-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')">
+						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Pin to profile
+					</button>
+				</li>
+				<li class="{% if not p.is_stickied %}hidden{% endif %}">
+					<button id="unpin-profile-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')">
+						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Unpin from profile
+					</button>
+				</li>
+				{% if p.deleted_utc > 0 %}
+				<li>
+					<button class="dropdown-item dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast('/undelete_post/{{p.id}}')">
+						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Undelete
+					</button>
+				<li>
+				{% else %}
+				<li>
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#deletePostModal" onclick="delete_postModal('{{p.id}}')">
+						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Delete
+					</button>
+				<li>
+				{% endif %}
+				{% endif %}
+				<!-- Requires auth and admin -->
+				{% if v and v.admin_level>=3 %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li class="{% if p.stickied %}hidden{% endif %}">
+					<button id="pin-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')">
+						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Pin
+					</button>
+				</li>
+				<li class="{% if not p.stickied %}hidden{% endif %}">
+					<button id="unpin-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/sticky/{{p.id}}','/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')">
+						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Unpin
+					</button>
+				</li>
+				<!-- Requires author -->
+				{% if v==p.author %}
+				<li class="{% if p.distinguish_level %}hidden{% endif %}">
+					<button id="distinguish-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')">
+						<i class="fas fa-crown fa-sm fa-fw mr-4"></i>Distinguish
+					</button>
+				</li>
+				<li class="{% if not p.distinguish_level %}hidden{% endif %}">
+					<button id="undistinguish-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')">
+						<i class="fas fa-crown fa-sm fa-fw mr-4"></i>Undistinguish
+					</button>
+				</li>
+				{% endif %}
+				{% endif %}
+				{% if v %}
+				<!-- Requires auth and admin and author -->
+				{% if v.admin_level >=3 or v.id == p.author.id and v.paid_dues %}
+				<li>
+					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
+				</li>
+				<li class="{% if p.club %}hidden{% endif %}">
+					<button id="club-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')">
+						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Mark club
+					</button>
+				</li>
+				<li class="{% if not p.club %}hidden{% endif %}">
+					<button id="unclub-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')"><i class="fas fa-eye fa-sm fa-fw mr-4"></i>Unmark club
+					</button>
+				</li>
+				{% endif %}
+				<!-- Requires admin and post has been reported -->
+				{% if v.admin_level >=3 %}
+				{% if "/reported/" in request.path %}
+				{% if v.id != p.author.id %}
+				<li>
+					<button class="list-inline-item text-red-500" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast('/ban_post/{{p.id}}')">
+						<i class="fas fa-ban"></i>Remove
+					</button>
+				</li>
+				{% endif %}
+				<li>
+					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast('/unban_post/{{p.id}}')">
+						<i class="fas fa-check fa-sm fa-fw mr-4"></i>Approve
+					</button>
+				</li>
+				{% else %}
+				<!-- Requires author -->
+				{% if v.id != p.author.id %}
+				<li class="{% if p.is_banned %}hidden{% endif %}">
+					<button id="remove-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/ban_post/{{p.id}}','remove-{{p.id}}','approve-{{p.id}}')">
+						<i class="fas fa-ban fa-sm fa-fw mr-4"></i>Remove
+					</button>
+				</li>
+				{% endif %}
+				<li class="{% if not p.is_banned %}hidden{% endif %}">
+					<button id="approve-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/unban_post/{{p.id}}','remove-{{p.id}}','approve-{{p.id}}')"><i class="fas fa-check fa-sm fa-fw mr-4"></i>Approve
+					</button>
+				</li>
+				{% endif %}
+				{% endif %}
+				<!-- Requires admin or author -->
+				{% if v.id == p.author_id or v.admin_level >= 3 %}
+				<li class="{% if p.over_18 %}hidden{% endif %}">
+					<button id="mark-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark-{{p.id}}','unmark-{{p.id}}')">
+						<i class="fas fa-eye-evil fa-sm fa-fw mr-4"></i>Mark +18
+					</button>
+				</li>
+				<li class="{% if not p.over_18 %}hidden{% endif %}">
+					<button id="unmark-{{p.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark-{{p.id}}','unmark-{{p.id}}')">
+						<i class="fas fa-eye-evil fa-sm fa-fw mr-4"></i>Unmark +18
+					</button>
+				</li>
+				{% endif %}
+				<!-- Requires super admin and app -->
+				{% if v.admin_level >= 4 and p.oauth_app %}
+				<li>
+					<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-pink-800 hover:to-pink-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-pink-800 focus:to-pink-700" href="{{p.oauth_app.permalink}}" >
+						<i class="fas fa-code fa-sm fa-fw mr-4"></i>API App
+					</a>
+				</li>
+				{% endif %}
+			</ul>
+		</div>
+	</li>
+
+	<!-- Requires not author -->
+	{% if not v.id==p.author_id and not p.award_count('ghosts') %}								
+	<a id="unblock-{{p.id}}" class="text-success list-inline-item {% if not p.is_blocking %} hidden{% endif %}" href="javascript:void(0)" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','block-{{p.id}}','unblock-{{p.id}}')"><i class="fas fa-eye text-success"></i>Unblock user</a>
+
+	<a id="prompt-{{p.id}}" class="text-red-500 blockuser list-inline-item hidden" href="javascript:void(0)" onclick="post_toast2('/settings/block?username={{p.author.username}}','prompt-{{p.id}}','unblock-{{p.id}}')"><i class="fas fa-eye-slash text-red-500"></i>Are you sure?</a>
+
+	<a id="block-{{p.id}}" class="text-red-500 blockuser list-inline-item {% if p.is_blocking %} hidden{% endif %}" href="javascript:void(0)" onclick="document.getElementById('block-{{p.id}}').classList.toggle('hidden');document.getElementById('prompt-{{p.id}}').classList.toggle('hidden');"><i class="fas fa-eye-slash fa-fw mr-2 text-red-500"></i>Block user</a>
+	{% endif %}
+
+	{% if not v.id==p.author_id and v.admin_level == 1 %}
+	<a id="sex-user-{{p.id}}" class="list-inline-item{% if p.is_blocking %} hidden{% endif %} text-red-500" href="javascript:void(0)" onclick="post_toast2('/settings/block?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')"><i class="fas fa-user-slash text-red-500"></i>Ban user</a>
+	<a id="unsex-user-{{p.id}}" class="list-inline-item{% if not p.is_blocking %} hidden{% endif %} text-success" href="javascript:void(0)" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')"><i class="fas fa-user-slash fa-fw mr-2 text-success"></i>Unban user</a>
+	{% endif %}
+
+	{% if v.admin_level >=3 and v.id!=p.author_id %}
+	<a id="ban-{{p.id}}" class="{% if p.author.is_suspended %}hidden{% endif %} list-inline-item text-red-500" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/post/{{p.id}}', '{{ p.author.id }}', '{{p.author.username}}')"><i class="fas fa-user-slash text-red-500 fa-fw mr-2"></i>Ban user</a>
+	<a id="unban-{{p.id}}" class="{% if not p.author.is_suspended %}hidden{% endif %} list-inline-item text-red-500" id="unexile2-user-{{p.id}}" href="javascript:void(0)" onclick="post_toast2('/unban_user/{{p.author_id}}','ban-{{p.id}}','unban-{{p.id}}')"><i class="fas fa-user-slash"></i>Unban user</a>
+	{% endif %}
+	{% endif %}
+</ul>
\ No newline at end of file
diff --git a/files/templates/submission/SubmissionAwards.html b/files/templates/submission/SubmissionAwards.html
new file mode 100644
index 000000000..14db988de
--- /dev/null
+++ b/files/templates/submission/SubmissionAwards.html
@@ -0,0 +1,10 @@
+<!-- // Import Special Event Awards Template -->
+<!-- {% if specialEvent %} -->
+	<!-- {% include "/{{ event.name }}/Awards.html" %} -->
+<!-- {% endif %} -->
+
+<!-- // Static Awards -->
+
+{% if p.award_count("train") %}
+	<!-- {% include "/awards/Trains.html" %} -->
+{% endif %}
diff --git a/files/templates/submission/SubmissionEditForm.html b/files/templates/submission/SubmissionEditForm.html
new file mode 100644
index 000000000..726d2d406
--- /dev/null
+++ b/files/templates/submission/SubmissionEditForm.html
@@ -0,0 +1,49 @@
+<div id="edit-post-body-{{p.id}}" class="hidden">
+	<form id="post-edit-form-{{p.id}}" class="flex flex-col w-full" action="/edit_post/{{p.id}}" method="post">
+		<input type="hidden" name="formkey" value="{{v.formkey}}">
+		<input type="hidden" name="current_page" value="{{request.path}}">
+		<input name="title" class="shadow-inner rounded-lg p-2 bg-gray-900 focus:bg-white border border-gray-700 border-dashed text-gray-200 focus:text-gray-900 mb-2" required placeholder="title" value="{{p.title}}">
+		<div class="rounded-lg border border-gray-700 border-dashed bg-gray-900 shadow-inner w-full">
+			<textarea name="body" maxlength="10000" id="post-edit-box-{{p.id}}" form="post-edit-form-{{p.id}}" class="w-full rounded-t-md p-3 text-gray-200 focus:text-gray-900 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="Add text to your post..." rows="10">{{p.body}}</textarea>
+			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-white border-opacity-10">
+				<li>
+					<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('post-edit-box-{{p.id}}')">
+						<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-500 hover:text-gray-400" onclick="makeItalics('post-edit-box-{{p.id}}')">
+						<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-500 hover:text-gray-400" onclick="makeQuote('post-edit-box-{{p.id}}')">
+						<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-500 hover:text-gray-400" onclick="commentForm('post-edit-box-{{p.id}}');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-500 hover:text-gray-400" onclick="loadEmojis('post-edit-box-{{p.id}}')" 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>
+		</div>
+		<div class="flex w-full justify-between mt-2">
+			<a href="/formatting" target="_blank" class="inline-block text-sm text-gray-600">
+				Formatting help
+			</a>
+			<div class="ml-auto flex">
+				<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-400" onclick="togglePostEdit('{{p.id}}')">
+					Cancel
+				</button>
+				<button form="post-edit-form-{{p.id}}" class="ml-2 block px-4 py-2 bg-gradient-to-t from-pink-800 to-pink-700 hover:from-pink-700 hover:to-pink-800 active:shadow-inner border border-gray-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-300 focus:text-gray-500 focus:outline-none">
+					Save edit
+				</button>
+			</div>
+		</div>
+	</form>
+</div>
\ No newline at end of file
diff --git a/files/templates/submission/SubmissionListingActions.html b/files/templates/submission/SubmissionListingActions.html
new file mode 100644
index 000000000..c7e2946ab
--- /dev/null
+++ b/files/templates/submission/SubmissionListingActions.html
@@ -0,0 +1,90 @@
+<ul class="list-inline text-right d-flex">
+	{% if p.realbody(v) %}
+	<a class="list-inline-item" href="javascript:void(0)" onclick="expandText('{{p.id}}')"><i class="fas fa-expand-alt mr-0 text-expand-icon-{{p.id}}"></i></a>
+	{% endif %}
+	<li class="list-inline-item">
+		<a {% if v and v.newtab %}target="_blank"{% endif %} {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
+			<i class="fas fa-comment-dots"></i>{{p.comment_count}}
+			<span class="text-info d-none new-comments"></span>
+		</a>
+	</li>
+	<a class="list-inline-item" href="/votes?link={{p.fullname}}"><i class="fas fa-arrows-v"></i>Votes</a>
+
+	{% if v %}
+	<a class="list-inline-item text-muted d-none d-md-inline-block" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#awardModal" onclick="awardModal('/post/{{p.id}}/awards')"><i class="fas fa-gift fa-fw"></i>Give Award</a>
+	{% endif %}
+
+	<a class="list-inline-item copy-link" href="javascript:void(0);" role="button" data-clipboard-text="{% if 'rama' in request.host %}https://dogpill.life{{p.permalink}}{% else %}{{p.permalink | full_link}}{% endif %}"><i class="fas fa-copy"></i>Copy link</a>
+
+	{% if v %}
+	<a id="subscribe-{{p.id}}" class="{% if p.id in v.subscribed_idlist() %}d-none{% endif %} list-inline-item" href="javascript:void(0)" onclick="post_toast2('/subscribe/{{p.id}}','subscribe-{{p.id}}','unsubscribe-{{p.id}}')"><i class="fas fa-eye"></i>Subscribe</a>
+	<a id="unsubscribe-{{p.id}}" class="{% if p.id not in v.subscribed_idlist() %}d-none{% endif %} list-inline-item" href="javascript:void(0)" onclick="post_toast2('/unsubscribe/{{p.id}}','subscribe-{{p.id}}','unsubscribe-{{p.id}}')"><i class="fas fa-eye-slash"></i>Unsubscribe</a>
+	{% endif %}
+
+	{% if v %}
+	<a id="save-{{p.id}}" class="{% if p.id in v.saved_idlist() %}d-none{% endif %} list-inline-item" href="javascript:void(0)" onclick="post_toast2('/save_post/{{p.id}}','save-{{p.id}}','unsave-{{p.id}}')"><i class="fas fa-save"></i>Save</a>
+	<a id="unsave-{{p.id}}" class="{% if not p.id in v.saved_idlist() %}d-none{% endif %} list-inline-item" href="javascript:void(0)" onclick="post_toast2('/unsave_post/{{p.id}}','save-{{p.id}}','unsave-{{p.id}}')"><i class="fas fa-save"></i>Unsave</a>
+	{% endif %}
+
+	<a class="list-inline-item" href="javascript:void(0)" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportPostModal" onclick="report_postModal('{{p.id}}')"><i class="fas fa-flag"></i>Report</a>
+
+	{% if v and v.id==p.author_id %}
+	<a id="pin-profile-{{p.id}}" class="{% if p.is_stickied %}d-none{% endif %} list-inline-item text-muted" href="javascript:void(0)" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')"><i class="fas fa-thumbtack fa-rotate--45"></i>Pin to profile</a>
+	<a id="unpin-profile-{{p.id}}" class="{% if not p.is_stickied %}d-none{% endif %} list-inline-item text-muted" href="javascript:void(0)" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')"><i class="fas fa-thumbtack fa-rotate--45"></i>Unpin from profile</a>
+
+	{% if p.deleted_utc > 0 %}
+	<a class="list-inline-item" href="javascript:void(0)" onclick="post_toast('/undelete_post/{{p.id}}')"><i class="fas fa-trash-alt"></i>Undelete</a>
+	{% else %}
+	<a class="list-inline-item" href="javascript:void(0)" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#deletePostModal" onclick="delete_postModal('{{p.id}}')"><i class="fas fa-trash-alt"></i>Delete</a>
+	{% endif %}
+	{% endif %}
+
+	{% if v and v.admin_level>=3 %}
+	<a id="pin-{{p.id}}" class="{% if p.stickied %}d-none{% endif %} list-inline-item text-info" href="javascript:void(0)" onclick="post_toast2('/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')"><i class="fas fa-thumbtack fa-rotate--45"></i>Pin</a>
+	<a id="unpin-{{p.id}}" class="{% if not p.stickied %}d-none{% endif %} list-inline-item text-info" href="javascript:void(0)" onclick="post_toast2('/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')"><i class="fas fa-thumbtack fa-rotate--45"></i>Unpin</a>
+	{% if v==p.author %}
+	<a id="distinguish-{{p.id}}" class="{% if p.distinguish_level %}d-none{% endif %} list-inline-item text-info" href="javascript:void(0)" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')"><i class="fas fa-crown"></i>Distinguish</a>
+	<a id="undistinguish-{{p.id}}" class="{% if not p.distinguish_level %}d-none{% endif %} list-inline-item text-info" href="javascript:void(0)" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')"><i class="fas fa-crown"></i>Undistinguish</a>
+	{% endif %}
+	{% endif %}
+
+	{% if v %}
+	{% if v.admin_level >=3 or v.id == p.author.id and v.paid_dues %}
+	<a id="club-{{p.id}}" class="{% if p.club %}d-none{% endif %} list-inline-item text-info" href="javascript:void(0)" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')"><i class="fas fa-eye-slash"></i>Mark club</a>
+	<a id="unclub-{{p.id}}" class="{% if not p.club %}d-none{% endif %} list-inline-item text-info" href="javascript:void(0)" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')"><i class="fas fa-eye"></i>Unmark club</a>
+	{% endif %}
+
+	{% if v.admin_level >=3 %}
+	{% if "/reported/" in request.path %}
+	{% if v.id != p.author.id %}<a class="list-inline-item text-danger" href="javascript:void(0)" onclick="post_toast('/ban_post/{{p.id}}')"><i class="fas fa-ban"></i>Remove</a>{% endif %}
+	<a class="list-inline-item text-success" href="javascript:void(0)" onclick="post_toast('/unban_post/{{p.id}}')"><i class="fas fa-check"></i>Approve</a>
+	{% else %}
+	{% if v.id != p.author.id %}<a id="remove-{{p.id}}" class="{% if p.is_banned %}d-none{% endif %} list-inline-item text-danger" href="javascript:void(0)" onclick="post_toast2('/ban_post/{{p.id}}','remove-{{p.id}}','approve-{{p.id}}')"><i class="fas fa-ban"></i>Remove</a>{% endif %}
+	<a id="approve-{{p.id}}" class="{% if not p.is_banned %}d-none{% endif %} list-inline-item text-success" href="javascript:void(0)" onclick="post_toast2('/unban_post/{{p.id}}','remove-{{p.id}}','approve-{{p.id}}')"><i class="fas fa-check"></i>Approve</a>
+	{% endif %}
+	{% endif %}
+
+
+	{% if v.admin_level >= 4 and p.oauth_app %}
+	<a class="list-inline-item" href="{{p.oauth_app.permalink}}" ><i class="fas fa-code"></i>API App</a>
+	{% endif %}
+
+	{% if not v.id==p.author_id and not p.award_count("ghosts") %}
+	<a id="unblock-{{p.id}}" class="text-success list-inline-item {% if not p.is_blocking %} d-none{% endif %}" href="javascript:void(0)" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','block-{{p.id}}','unblock-{{p.id}}')"><i class="fas fa-eye text-success"></i>Unblock user</a>
+
+	<a id="prompt-{{p.id}}" class="text-danger blockuser list-inline-item d-none" href="javascript:void(0)" onclick="post_toast2('/settings/block?username={{p.author.username}}','prompt-{{p.id}}','unblock-{{p.id}}')"><i class="fas fa-eye-slash text-danger"></i>Are you sure?</a>
+
+	<a id="block-{{p.id}}" class="text-danger blockuser list-inline-item {% if p.is_blocking %} d-none{% endif %}" href="javascript:void(0)" onclick="document.getElementById('block-{{p.id}}').classList.toggle('d-none');document.getElementById('prompt-{{p.id}}').classList.toggle('d-none');"><i class="fas fa-eye-slash text-danger"></i>Block user</a>
+	{% endif %}
+
+	{% if v and (v.id==p.author_id or v.admin_level>=3) %}
+	<a id="mark-{{p.id}}" class="{% if p.over_18 %}d-none{% endif %} list-inline-item text-danger" href="javascript:void(0)" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark-{{p.id}}','unmark-{{p.id}}')"><i class="fas fa-eye-evil"></i>Mark +18</a>
+	<a id="unmark-{{p.id}}" class="{% if not p.over_18 %}d-none{% endif %} list-inline-item text-danger" href="javascript:void(0)" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark-{{p.id}}','unmark-{{p.id}}')"><i class="fas fa-eye-evil"></i>Unmark +18</a>
+	{% endif %}
+
+	{% if v.admin_level >=3 and v.id!=p.author_id %}
+	<a id="ban-{{p.id}}" class="{% if p.author.is_suspended %}d-none{% endif %} list-inline-item text-danger" id="exile-comment-{{p.id}}" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/post/{{p.id}}', '{{ p.author.id }}', '{{p.author.username}}')"><i class="fas fa-user-slash text-danger fa-fw"></i>Ban user</a>
+	<a id="unban-{{p.id}}" class="{% if not p.author.is_suspended %}d-none{% endif %} list-inline-item text-danger" id="unexile2-user-{{p.id}}" href="javascript:void(0)" onclick="post_toast2('/unban_user/{{p.author_id}}','ban-{{p.id}}','unban-{{p.id}}')"><i class="fas fa-user-slash"></i>Unban user</a>
+	{% endif %}
+	{% endif %}
+</ul>
\ No newline at end of file
diff --git a/files/templates/toasts/toasts.html b/files/templates/toasts/toasts.html
new file mode 100644
index 000000000..7fb5eeb8d
--- /dev/null
+++ b/files/templates/toasts/toasts.html
@@ -0,0 +1,16 @@
+<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 text-center">
+		<i class="fas fa-check-circle text-success mr-2"></i>Link copied to clipboard
+	</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-success text-center text-white">
+		<i class="fas fa-comment-alt-smile mr-2"></i><span id="toast-post-success-text"></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-danger 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>
+	</div>
+</div>
\ No newline at end of file