diff --git a/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap b/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap
index 476ffa3188e..4de40b5230b 100644
--- a/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`(1) Default render 1`] = `
     Set Beneficiaries
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
@@ -46,7 +46,7 @@ exports[`(2) Default render with author 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
@@ -76,7 +76,7 @@ exports[`(3) DialogBody 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
@@ -106,7 +106,7 @@ exports[`(4) DialogBody with author 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
diff --git a/src/common/components/chart-stats/__snapshots__/index.spec.tsx.snap b/src/common/components/chart-stats/__snapshots__/index.spec.tsx.snap
index 98e9de8cf82..d949ec6ed56 100644
--- a/src/common/components/chart-stats/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/chart-stats/__snapshots__/index.spec.tsx.snap
@@ -5,34 +5,34 @@ exports[`(1) Default render 1`] = `
   className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
 >
   <table
-    className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+    className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
   >
     <thead>
       <tr
         className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
       >
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Last Price
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           24h volume
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Bid
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Ask
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Spread
         </th>
@@ -90,42 +90,42 @@ exports[`(2) Render with loading 1`] = `
   className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
 >
   <table
-    className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+    className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
   >
     <thead>
       <tr
         className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
       >
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index 30c0453ed69..69b098375de 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-c8231097-5f22-42ab-863c-724def2d870a"
+      id="editor-tool-emoji-picker-fec72906-7b57-4b29-bfaa-dc1edc171f08"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-7955455d-222f-4212-b4a6-a73756b00589"
+      id="editor-tool-emoji-picker-883ace21-bed9-4ce1-ba59-54d3d34e906f"
       role="none"
       title="Emoji"
     >
diff --git a/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap b/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap
index 4823dd00f3f..3dbb3ff41e5 100644
--- a/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/community-roles/__snapshots__/index.spec.tsx.snap
@@ -11,14 +11,14 @@ exports[`(1) Default render 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "200px",
@@ -28,7 +28,7 @@ exports[`(1) Default render 1`] = `
             Account
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "74px",
@@ -38,7 +38,7 @@ exports[`(1) Default render 1`] = `
             Role
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-3"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-3"
           >
             Title
           </th>
@@ -146,14 +146,14 @@ exports[`(2) Should not show add user button 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "200px",
@@ -163,7 +163,7 @@ exports[`(2) Should not show add user button 1`] = `
             Account
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "74px",
@@ -173,7 +173,7 @@ exports[`(2) Should not show add user button 1`] = `
             Role
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-3"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-3"
           >
             Title
           </th>
@@ -281,14 +281,14 @@ exports[`(3) Should show add user button 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "200px",
@@ -298,7 +298,7 @@ exports[`(3) Should show add user button 1`] = `
             Account
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "74px",
@@ -308,7 +308,7 @@ exports[`(3) Should show add user button 1`] = `
             Role
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-3"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-3"
           >
             Title
           </th>
diff --git a/src/common/components/edit-history/index.scss b/src/common/components/edit-history/index.scss
index d1444f01c88..78c9bd09680 100644
--- a/src/common/components/edit-history/index.scss
+++ b/src/common/components/edit-history/index.scss
@@ -39,10 +39,12 @@
         .diff-select {
           width: 55%;
           flex-shrink: 0;
+
           label {
             font-size: 0.9rem;
           }
         }
+
         select {
           font-size: 0.9rem;
         }
@@ -56,6 +58,10 @@
           @apply bg-light-300;
         }
 
+        @include themify(night) {
+          @apply bg-gray-800;
+        }
+
         .diff-select {
           padding-left: 40px;
           margin: 20px 0;
@@ -68,6 +74,7 @@
           grid-template-rows: 24px 24px;
           cursor: pointer;
           padding: 10px 0;
+          border: 0;
 
           &.selected {
             .item-title {
@@ -79,7 +86,7 @@
             }
 
             @include themify(night) {
-              @apply bg-blue-dusky-2;
+              @apply bg-blue-dusky;
             }
           }
 
diff --git a/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap
index 0902bbecfda..94ac0d9a05e 100644
--- a/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap
@@ -353,7 +353,7 @@ exports[`(3) Active user. Trending filter 1`] = `
         >
           <li>
             <a
-              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 active"
+              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 bg-blue-dark-sky text-white hover:text-white"
               href="/@foo/feed"
               id="feed"
               onClick={[Function]}
@@ -768,7 +768,7 @@ exports[`(4) Active user. Friends 1`] = `
         >
           <li>
             <a
-              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 active"
+              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 bg-blue-dark-sky text-white hover:text-white"
               href="/@foo/feed"
               id="feed"
               onClick={[Function]}
diff --git a/src/common/components/entry-index-menu/index.tsx b/src/common/components/entry-index-menu/index.tsx
index e9b5dfc72f4..36848e9cb64 100644
--- a/src/common/components/entry-index-menu/index.tsx
+++ b/src/common/components/entry-index-menu/index.tsx
@@ -470,12 +470,12 @@ export class EntryIndexMenu extends Component<Props, States> {
                           filter === "feed" &&
                           (introduction === IntroductionType.NONE ||
                             introduction === IntroductionType.FRIENDS)
-                            ? "active"
+                            ? "bg-blue-dark-sky text-white hover:text-white"
                             : ""
                         }   ${
                           introduction !== IntroductionType.NONE &&
                           introduction === IntroductionType.FRIENDS
-                            ? "active"
+                            ? "bg-blue-dark-sky text-white hover:text-white"
                             : ""
                         }`
                       )}
diff --git a/src/common/components/entry-list-item/index.tsx b/src/common/components/entry-list-item/index.tsx
index 95805979071..5907f9300d7 100644
--- a/src/common/components/entry-list-item/index.tsx
+++ b/src/common/components/entry-list-item/index.tsx
@@ -24,7 +24,6 @@ import { ProfilePopover } from "../profile-popover";
 import { match } from "react-router-dom";
 import { getPost } from "../../api/bridge";
 import "./_index.scss";
-import useMountedState from "react-use/lib/useMountedState";
 import { useMappedStore } from "../../store/use-mapped-store";
 import useMount from "react-use/lib/useMount";
 import { useUnmount } from "react-use";
@@ -68,8 +67,6 @@ export function EntryListItem({
 
   const { global, activeUser, addAccount, updateEntry } = useMappedStore();
 
-  const isMounted = useMountedState();
-
   useMount(() => {
     document.getElementsByTagName("html")[0].style.position = "relative";
   });
@@ -206,12 +203,11 @@ export function EntryListItem({
           </span>
         </div>
         <div className="item-header-features">
-          {(community && !!entry.stats?.is_pinned) ||
-            (entry.permlink === pinned && (
-              <Tooltip content={_t("entry-list-item.pinned")}>
-                <span className="pinned">{pinSvg}</span>
-              </Tooltip>
-            ))}
+          {((community && !!entry.stats?.is_pinned) || entry.permlink === pinned) && (
+            <Tooltip content={_t("entry-list-item.pinned")}>
+              <span className="pinned">{pinSvg}</span>
+            </Tooltip>
+          )}
           {reBlogged && (
             <span className="reblogged">
               {repeatSvg} {_t("entry-list-item.reblogged", { n: reBlogged })}
diff --git a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
index deaa41f5072..cce13a2e967 100644
--- a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
@@ -17,7 +17,7 @@ Array [
       type="button"
     >
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <svg
           className="slider-svg-up"
@@ -158,7 +158,7 @@ Array [
       type="button"
     >
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <svg
           className="slider-svg-down"
diff --git a/src/common/components/faq-category/__snapshots__/index.spec.tsx.snap b/src/common/components/faq-category/__snapshots__/index.spec.tsx.snap
index b1da62f20a1..785ceb77490 100644
--- a/src/common/components/faq-category/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/faq-category/__snapshots__/index.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`(1) Default render 1`] = `
             type="button"
           >
             <div
-              className="flex justify-center items-center w-5 h-5 undefined"
+              className="flex justify-center items-center w-5 h-5 "
             >
               <svg
                 className="slider-svg-down"
diff --git a/src/common/components/favorite-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/favorite-btn/__snapshots__/index.spec.tsx.snap
index 81d2ffe66b8..a6e4694deba 100644
--- a/src/common/components/favorite-btn/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/favorite-btn/__snapshots__/index.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`(1) No active user 1`] = `
     type="button"
   >
     <div
-      className="flex justify-center items-center w-5 h-5 undefined"
+      className="flex justify-center items-center w-5 h-5 "
     >
       <svg
         height="24"
@@ -52,7 +52,7 @@ exports[`(2) Not Favorited 1`] = `
     type="button"
   >
     <div
-      className="flex justify-center items-center w-5 h-5 undefined"
+      className="flex justify-center items-center w-5 h-5 "
     >
       <svg
         height="24"
@@ -86,7 +86,7 @@ exports[`(3) Favorited 1`] = `
     type="button"
   >
     <div
-      className="flex justify-center items-center w-5 h-5 undefined"
+      className="flex justify-center items-center w-5 h-5 "
     >
       <svg
         height="24"
diff --git a/src/common/components/floating-faq/index.tsx b/src/common/components/floating-faq/index.tsx
index cede72218cc..18fe888c988 100644
--- a/src/common/components/floating-faq/index.tsx
+++ b/src/common/components/floating-faq/index.tsx
@@ -16,16 +16,15 @@ import "./index.scss";
 import { FormControl, InputGroup } from "@ui/input";
 import { Button } from "@ui/button";
 import { Accordion, AccordionCollapse, AccordionToggle } from "@ui/accordion";
+import { classNameObject } from "../../helper/class-name-object";
 
 export interface FaqObject {
   show: boolean;
-  className: string;
 }
 
-export const handleFloatingContainer = (show: boolean, className: string) => {
+export const handleFloatingContainer = (show: boolean) => {
   const detail: FaqObject = {
-    show: show,
-    className: className
+    show: show
   };
   const ev = new CustomEvent("handleShow", { detail });
   window.dispatchEvent(ev);
@@ -45,7 +44,6 @@ const FloatingFAQ = () => {
   const [datatoShow, setDatatoShow] = useState<string[]>([]);
   const [innerWidth, setInnerWidth] = useState(0);
   const [isSubmitPage, setIsSubmitPage] = useState(false);
-  const [className, setClassName] = useState("");
 
   useEffect(() => {
     window.addEventListener("handleShow", onHandleShow);
@@ -113,13 +111,14 @@ const FloatingFAQ = () => {
   const onHandleShow = (e: Event) => {
     const detail = (e as CustomEvent).detail as FaqObject;
     setShow(detail.show);
-    setClassName(detail.className);
   };
 
   const handleRouterChange = () => {
     setShow(false);
     setDisplay(false);
-    setIsSubmitPage(!!routerLocation.pathname.match("submit"));
+    setIsSubmitPage(
+      !!routerLocation.pathname.match("submit") || !!routerLocation.pathname.match("edit")
+    );
     for (const p of data.faqPaths) {
       if (routerLocation.pathname.match(p.path)) {
         setDisplay(true);
@@ -139,180 +138,168 @@ const FloatingFAQ = () => {
   };
   return (
     <>
-      {
-        <>
-          <ClickAwayListener
-            className="floating-faq-button"
-            onClickAway={() => show && setShow(false)}
+      <ClickAwayListener className="floating-faq-button" onClickAway={() => show && setShow(false)}>
+        {display && !isSubmitPage && (
+          <Button
+            noPadding={innerWidth < 768}
+            className="fixed bottom-4 right-4 w-[40px] h-[40px] md:w-auto md:h-[40px]"
+            onClick={handleShow}
+            icon={helpIconSvg}
+            iconPlacement="left"
           >
-            {display && !isSubmitPage && (
-              <Button
-                noPadding={innerWidth < 768}
-                className="fixed bottom-4 right-4 w-[40px] h-[40px] md:w-auto md:h-[40px]"
-                onClick={handleShow}
-                icon={helpIconSvg}
-                iconPlacement="left"
-              >
-                {innerWidth >= 768 ? _t("floating-faq.help") : ""}
-              </Button>
-            )}
-
-            {show && display ? (
-              <div className={`floating-container ${isSubmitPage ? className : ""}`}>
-                <div className="faq-welcome">
-                  <h3 className="faq-welcome-message">{_t("floating-faq.welcome")}</h3>
-                  <Button
-                    className="absolute top-7 right-4"
-                    appearance="gray-link"
-                    onClick={() => setShow(false)}
-                    icon={closeSvg}
-                  />
-                </div>
-                <div className="faq-content-list">
-                  <div className="faq-content-list-item">
-                    <Accordion defaultActiveKey="0">
-                      <AccordionToggle eventKey="0">
-                        <div className={helpClass} onClick={() => setExpandedHelp(!expandedHelp)}>
-                          <div className="flex justify-between items-center section-card relative">
-                            <div className="flex items-center">
-                              <div className="flex items-center ml-3">
-                                <div className="section-title">{_t("floating-faq.need-help")}</div>
-                              </div>
-                            </div>
+            {innerWidth >= 768 ? _t("floating-faq.help") : ""}
+          </Button>
+        )}
 
-                            <Tooltip content={_t("floating-faq.toggle-icon-info")}>
-                              <AccordionToggle
-                                as={Button}
-                                appearance="link"
-                                noPadding={true}
-                                eventKey="0"
-                                onClick={() => {
-                                  setExpandedHelp(!expandedHelp);
-                                }}
-                                icon={
-                                  expandedHelp ? chevronUpSvgForSlider : chevronDownSvgForSlider
-                                }
-                              />
-                            </Tooltip>
+        {show && display ? (
+          <div className={`floating-container ${isSubmitPage ? "r-[10rem]" : ""}`}>
+            <div className="faq-welcome">
+              <h3 className="faq-welcome-message">{_t("floating-faq.welcome")}</h3>
+              <Button
+                className={classNameObject({
+                  "absolute top-7 right-4": true,
+                  "right-4": !isSubmitPage,
+                  "right-[10rem]": isSubmitPage
+                })}
+                appearance="gray-link"
+                onClick={() => setShow(false)}
+                icon={closeSvg}
+              />
+            </div>
+            <div className="faq-content-list">
+              <div className="faq-content-list-item">
+                <Accordion defaultActiveKey="0">
+                  <AccordionToggle eventKey="0">
+                    <div className={helpClass} onClick={() => setExpandedHelp(!expandedHelp)}>
+                      <div className="flex justify-between items-center section-card relative">
+                        <div className="flex items-center">
+                          <div className="flex items-center ml-3">
+                            <div className="section-title">{_t("floating-faq.need-help")}</div>
                           </div>
                         </div>
-                      </AccordionToggle>
 
-                      <AccordionCollapse eventKey="0">
-                        <div className="help-content">
-                          <div className="card-body p-3">
-                            <div className="mb-3 search-bar w-full">
-                              <FormControl
-                                type="text"
-                                placeholder={_t("floating-faq.search-placeholder")}
-                                value={searchText}
-                                onChange={(e) => {
-                                  setSearchText(e.target.value);
-                                }}
-                              />
-                            </div>
-                            {!searchText ? (
-                              <p className="user-info">{_t("floating-faq.suggestion")}</p>
-                            ) : !datatoShow.length ? (
-                              <p className="user-info">{_t("floating-faq.no-results")}</p>
-                            ) : (
-                              ""
-                            )}
-                            {datatoShow.map((x) => {
-                              return (
-                                <a
-                                  className="faq-article"
-                                  href={`/faq#${x}`}
-                                  target="_blank"
-                                  key={x}
-                                >
-                                  <div className="faq-image">{articleSvg}</div>
-                                  {_t(`static.faq.${x}-header`)}
-                                </a>
-                              );
-                            })}
-                          </div>
-                        </div>
-                      </AccordionCollapse>
-                    </Accordion>
-                  </div>
-                  <div className="faq-content-list-item contact-us">
-                    <Accordion>
-                      <AccordionToggle eventKey="1">
-                        <div
-                          className={contactClass}
-                          onClick={() => setExpandedContact(!expandedContact)}
-                        >
-                          <div className="flex justify-between items-center section-card relative">
-                            <div className="flex items-center">
-                              <div className="flex items-center ml-3">
-                                <div className="section-title">{_t("floating-faq.contact")}</div>
-                              </div>
-                            </div>
-                            <Tooltip content={_t("floating-faq.toggle-icon-info")}>
-                              <AccordionToggle
-                                as={Button}
-                                appearance="link"
-                                eventKey="1"
-                                noPadding={true}
-                                onClick={() => {
-                                  setExpandedContact(!expandedContact);
-                                }}
-                                icon={
-                                  expandedContact ? chevronUpSvgForSlider : chevronDownSvgForSlider
-                                }
-                              />
-                            </Tooltip>
-                          </div>
+                        <Tooltip content={_t("floating-faq.toggle-icon-info")}>
+                          <AccordionToggle
+                            as={Button}
+                            appearance="link"
+                            noPadding={true}
+                            eventKey="0"
+                            onClick={() => {
+                              setExpandedHelp(!expandedHelp);
+                            }}
+                            icon={expandedHelp ? chevronUpSvgForSlider : chevronDownSvgForSlider}
+                          />
+                        </Tooltip>
+                      </div>
+                    </div>
+                  </AccordionToggle>
+
+                  <AccordionCollapse eventKey="0">
+                    <div className="help-content">
+                      <div className="card-body p-3">
+                        <div className="mb-3 search-bar w-full">
+                          <FormControl
+                            type="text"
+                            placeholder={_t("floating-faq.search-placeholder")}
+                            value={searchText}
+                            onChange={(e) => {
+                              setSearchText(e.target.value);
+                            }}
+                          />
                         </div>
-                      </AccordionToggle>
-                      <AccordionCollapse eventKey="1">
-                        <div className="card-body p-3">
-                          <div className="mb-3">
-                            <InputGroup className="username" prepend="@">
-                              <FormControl
-                                type="text"
-                                autoFocus={true}
-                                required={true}
-                                placeholder={_t("floating-faq.username")}
-                              />
-                            </InputGroup>
-                          </div>
-                          <div className="mb-3">
-                            <InputGroup className="message">
-                              <FormControl
-                                type="textarea"
-                                autoFocus={true}
-                                required={true}
-                                maxLength={1000}
-                                placeholder={_t("floating-faq.message")}
-                              />
-                            </InputGroup>
+                        {!searchText ? (
+                          <p className="user-info">{_t("floating-faq.suggestion")}</p>
+                        ) : !datatoShow.length ? (
+                          <p className="user-info">{_t("floating-faq.no-results")}</p>
+                        ) : (
+                          ""
+                        )}
+                        {datatoShow.map((x) => {
+                          return (
+                            <a className="faq-article" href={`/faq#${x}`} target="_blank" key={x}>
+                              <div className="faq-image">{articleSvg}</div>
+                              {_t(`static.faq.${x}-header`)}
+                            </a>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </AccordionCollapse>
+                </Accordion>
+              </div>
+              <div className="faq-content-list-item contact-us">
+                <Accordion>
+                  <AccordionToggle eventKey="1">
+                    <div
+                      className={contactClass}
+                      onClick={() => setExpandedContact(!expandedContact)}
+                    >
+                      <div className="flex justify-between items-center section-card relative">
+                        <div className="flex items-center">
+                          <div className="flex items-center ml-3">
+                            <div className="section-title">{_t("floating-faq.contact")}</div>
                           </div>
-                          <Button
-                            className="submit-btn"
-                            type="submit"
-                            onClick={() =>
-                              window.open(
-                                "mailto:bug@ecency.com?Subject=Reporting issue&Body=Hello team, \n I would like to report issue: \n",
-                                "_blank"
-                              )
-                            }
-                          >
-                            {_t("floating-faq.submit")}
-                          </Button>
                         </div>
-                      </AccordionCollapse>
-                    </Accordion>
-                  </div>
-                </div>
+                        <Tooltip content={_t("floating-faq.toggle-icon-info")}>
+                          <AccordionToggle
+                            as={Button}
+                            appearance="link"
+                            eventKey="1"
+                            noPadding={true}
+                            onClick={() => {
+                              setExpandedContact(!expandedContact);
+                            }}
+                            icon={expandedContact ? chevronUpSvgForSlider : chevronDownSvgForSlider}
+                          />
+                        </Tooltip>
+                      </div>
+                    </div>
+                  </AccordionToggle>
+                  <AccordionCollapse eventKey="1">
+                    <div className="card-body p-3">
+                      <div className="mb-3">
+                        <InputGroup className="username" prepend="@">
+                          <FormControl
+                            type="text"
+                            autoFocus={true}
+                            required={true}
+                            placeholder={_t("floating-faq.username")}
+                          />
+                        </InputGroup>
+                      </div>
+                      <div className="mb-3">
+                        <InputGroup className="message">
+                          <FormControl
+                            type="textarea"
+                            autoFocus={true}
+                            required={true}
+                            maxLength={1000}
+                            placeholder={_t("floating-faq.message")}
+                          />
+                        </InputGroup>
+                      </div>
+                      <Button
+                        className="submit-btn"
+                        type="submit"
+                        onClick={() =>
+                          window.open(
+                            "mailto:bug@ecency.com?Subject=Reporting issue&Body=Hello team, \n I would like to report issue: \n",
+                            "_blank"
+                          )
+                        }
+                      >
+                        {_t("floating-faq.submit")}
+                      </Button>
+                    </div>
+                  </AccordionCollapse>
+                </Accordion>
               </div>
-            ) : (
-              ""
-            )}
-          </ClickAwayListener>
-        </>
-      }
+            </div>
+          </div>
+        ) : (
+          ""
+        )}
+      </ClickAwayListener>
     </>
   );
 };
diff --git a/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap b/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap
index 23554e98958..7db6c3a72d8 100644
--- a/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/image-upload-button/__snapshots__/index.spec.tsx.snap
@@ -15,7 +15,7 @@ Array [
     type="button"
   >
     <div
-      className="flex justify-center items-center w-5 h-5 undefined"
+      className="flex justify-center items-center w-5 h-5 "
     >
       <svg
         viewBox="0 0 24 24"
diff --git a/src/common/components/key-or-hot/__snapshots__/index.spec.tsx.snap b/src/common/components/key-or-hot/__snapshots__/index.spec.tsx.snap
index 3e03e8a17b9..dedb3876fb5 100644
--- a/src/common/components/key-or-hot/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/key-or-hot/__snapshots__/index.spec.tsx.snap
@@ -79,7 +79,7 @@ exports[`(1) Default render 1`] = `
         Sign with hivesigner
       </div>
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <img
           alt="hivesigner"
diff --git a/src/common/components/login/__snapshots__/index.spec.tsx.snap b/src/common/components/login/__snapshots__/index.spec.tsx.snap
index 97baf7fa3ef..ac72127779f 100644
--- a/src/common/components/login/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/login/__snapshots__/index.spec.tsx.snap
@@ -104,7 +104,7 @@ Array [
         Login with hivesigner
       </div>
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <img
           alt="hivesigner"
@@ -318,7 +318,7 @@ Array [
         Login with hivesigner
       </div>
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <img
           alt="hivesigner"
@@ -535,7 +535,7 @@ Array [
         Login with hivesigner
       </div>
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <img
           alt="hivesigner"
@@ -652,7 +652,7 @@ Array [
         Login with hivesigner
       </div>
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <img
           alt="hivesigner"
@@ -680,7 +680,7 @@ Array [
         Login with keychain
       </div>
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <img
           alt="keychain"
diff --git a/src/common/components/market-swap-form/__snapshots__/market-swap-form-header.spec.tsx.snap b/src/common/components/market-swap-form/__snapshots__/market-swap-form-header.spec.tsx.snap
index 4c19d613179..3363a7a38d7 100644
--- a/src/common/components/market-swap-form/__snapshots__/market-swap-form-header.spec.tsx.snap
+++ b/src/common/components/market-swap-form/__snapshots__/market-swap-form-header.spec.tsx.snap
@@ -45,7 +45,7 @@ exports[`should render sign title 1`] = `
     type="button"
   >
     <div
-      className="flex justify-center items-center w-5 h-5 undefined"
+      className="flex justify-center items-center w-5 h-5 "
     >
       <svg
         viewBox="0 0 24 24"
diff --git a/src/common/components/navbar/__snapshots__/index.spec.tsx.snap b/src/common/components/navbar/__snapshots__/index.spec.tsx.snap
index 07dd59a3724..6e8f9253593 100644
--- a/src/common/components/navbar/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/navbar/__snapshots__/index.spec.tsx.snap
@@ -199,7 +199,7 @@ exports[`(1) Default render 1`] = `
           type="button"
         >
           <div
-            className="flex justify-center items-center w-5 h-5 undefined"
+            className="flex justify-center items-center w-5 h-5 "
           >
             <svg
               viewBox="0 0 24 24"
@@ -227,7 +227,7 @@ exports[`(1) Default render 1`] = `
               type="button"
             >
               <div
-                className="flex justify-center items-center w-5 h-5 undefined"
+                className="flex justify-center items-center w-5 h-5 "
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -508,7 +508,7 @@ exports[`(2) Night Theme 1`] = `
           type="button"
         >
           <div
-            className="flex justify-center items-center w-5 h-5 undefined"
+            className="flex justify-center items-center w-5 h-5 "
           >
             <svg
               viewBox="0 0 24 24"
@@ -536,7 +536,7 @@ exports[`(2) Night Theme 1`] = `
               type="button"
             >
               <div
-                className="flex justify-center items-center w-5 h-5 undefined"
+                className="flex justify-center items-center w-5 h-5 "
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -817,7 +817,7 @@ exports[`(3) With active user 1`] = `
           type="button"
         >
           <div
-            className="flex justify-center items-center w-5 h-5 undefined"
+            className="flex justify-center items-center w-5 h-5 "
           >
             <svg
               viewBox="0 0 24 24"
@@ -845,7 +845,7 @@ exports[`(3) With active user 1`] = `
               type="button"
             >
               <div
-                className="flex justify-center items-center w-5 h-5 undefined"
+                className="flex justify-center items-center w-5 h-5 "
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -1126,7 +1126,7 @@ exports[`(4) With active user && usePrivate = false 1`] = `
           type="button"
         >
           <div
-            className="flex justify-center items-center w-5 h-5 undefined"
+            className="flex justify-center items-center w-5 h-5 "
           >
             <svg
               viewBox="0 0 24 24"
@@ -1154,7 +1154,7 @@ exports[`(4) With active user && usePrivate = false 1`] = `
               type="button"
             >
               <div
-                className="flex justify-center items-center w-5 h-5 undefined"
+                className="flex justify-center items-center w-5 h-5 "
               >
                 <svg
                   viewBox="0 0 24 24"
diff --git a/src/common/components/navbar/index.tsx b/src/common/components/navbar/index.tsx
index 172465001fd..76f54b1f4ff 100644
--- a/src/common/components/navbar/index.tsx
+++ b/src/common/components/navbar/index.tsx
@@ -124,8 +124,6 @@ export function Navbar({ match, history, setStepOne, setStepTwo, step }: Props)
       id="sticky-container"
     >
       <NavbarMobile
-        transparentVerify={transparentVerify}
-        themeText={themeText}
         expanded={expanded}
         setExpanded={setExpanded}
         step={step}
diff --git a/src/common/components/navbar/navbar-mobile.tsx b/src/common/components/navbar/navbar-mobile.tsx
index 591438e30cb..7f90416a26b 100644
--- a/src/common/components/navbar/navbar-mobile.tsx
+++ b/src/common/components/navbar/navbar-mobile.tsx
@@ -15,8 +15,6 @@ interface Props {
   setStepOne?: () => void;
   expanded: boolean;
   setExpanded: (v: boolean) => void;
-  transparentVerify: boolean;
-  themeText: string;
 }
 
 export function NavbarMobile({
@@ -26,9 +24,7 @@ export function NavbarMobile({
   history,
   setStepOne,
   expanded,
-  setExpanded,
-  transparentVerify,
-  themeText
+  setExpanded
 }: Props) {
   const { activeUser } = useMappedStore();
 
diff --git a/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap b/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap
index 147cc7d95bb..644a647125a 100644
--- a/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/open-orders/__snapshots__/index.spec.tsx.snap
@@ -13,39 +13,39 @@ exports[`(1) Open orders render default 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             Date
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             Type
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             Price
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             HIVE
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             HBD ($)
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             Action
           </th>
diff --git a/src/common/components/orders/__snapshots__/index.spec.tsx.snap b/src/common/components/orders/__snapshots__/index.spec.tsx.snap
index bd57cb66d47..069ebcdc72b 100644
--- a/src/common/components/orders/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/orders/__snapshots__/index.spec.tsx.snap
@@ -13,24 +13,24 @@ exports[`(1) Orders render default 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             Price
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             HIVE
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
           >
             Total HBD ($)
           </th>
diff --git a/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap b/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap
index 35c9f70cb2c..80f855a0baf 100644
--- a/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/post-scheduler/__snapshots__/index.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`(1) Render with null date 1`] = `
     Schedule
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
diff --git a/src/common/components/preferences/__snapshots__/index.spec.tsx.snap b/src/common/components/preferences/__snapshots__/index.spec.tsx.snap
index b5cccc790c7..a15986e29af 100644
--- a/src/common/components/preferences/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/preferences/__snapshots__/index.spec.tsx.snap
@@ -339,7 +339,7 @@ exports[`(1) Default render 1`] = `
               type="button"
             >
               <div
-                className="flex justify-center items-center w-5 h-5 undefined"
+                className="flex justify-center items-center w-5 h-5 "
               >
                 <svg
                   fill="currentColor"
diff --git a/src/common/components/profile-edit/__snapshots__/index.spec.tsx.snap b/src/common/components/profile-edit/__snapshots__/index.spec.tsx.snap
index 7b8ae718b71..4ea7a452388 100644
--- a/src/common/components/profile-edit/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/profile-edit/__snapshots__/index.spec.tsx.snap
@@ -91,7 +91,7 @@ exports[`(1) Default render 1`] = `
               type="button"
             >
               <div
-                className="flex justify-center items-center w-5 h-5 undefined"
+                className="flex justify-center items-center w-5 h-5 "
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -156,7 +156,7 @@ exports[`(1) Default render 1`] = `
               type="button"
             >
               <div
-                className="flex justify-center items-center w-5 h-5 undefined"
+                className="flex justify-center items-center w-5 h-5 "
               >
                 <svg
                   viewBox="0 0 24 24"
diff --git a/src/common/components/profile-referrals/__snapshots__/index.spec.tsx.snap b/src/common/components/profile-referrals/__snapshots__/index.spec.tsx.snap
index 4748570155d..c5a71dba716 100644
--- a/src/common/components/profile-referrals/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/profile-referrals/__snapshots__/index.spec.tsx.snap
@@ -56,7 +56,7 @@ exports[`(1) Default render - With data. 1`] = `
             Copy link
           </div>
           <div
-            className="flex justify-center items-center w-5 h-5 undefined"
+            className="flex justify-center items-center w-5 h-5 "
           >
             <svg
               viewBox="0 0 24 24"
diff --git a/src/common/components/transfer-he/__snapshots__/index.spec.tsx.snap b/src/common/components/transfer-he/__snapshots__/index.spec.tsx.snap
index 69db1023720..66ccd463176 100644
--- a/src/common/components/transfer-he/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/transfer-he/__snapshots__/index.spec.tsx.snap
@@ -490,7 +490,7 @@ exports[`(1) Hive Engine - Transfer (3) Step 3 1`] = `
               Sign with hivesigner
             </div>
             <div
-              className="flex justify-center items-center w-5 h-5 undefined"
+              className="flex justify-center items-center w-5 h-5 "
             >
               <img
                 alt="hivesigner"
diff --git a/src/common/components/transfer/__snapshots__/index.spec.tsx.snap b/src/common/components/transfer/__snapshots__/index.spec.tsx.snap
index 6537779ad68..99a115af799 100644
--- a/src/common/components/transfer/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/transfer/__snapshots__/index.spec.tsx.snap
@@ -496,7 +496,7 @@ exports[`(1) Transfer HIVE (3) Step 3 1`] = `
               Sign with hivesigner
             </div>
             <div
-              className="flex justify-center items-center w-5 h-5 undefined"
+              className="flex justify-center items-center w-5 h-5 "
             >
               <img
                 alt="hivesigner"
diff --git a/src/common/components/withdraw-routes/__snapshots__/index.spec.tsx.snap b/src/common/components/withdraw-routes/__snapshots__/index.spec.tsx.snap
index 07d515afec6..360c3c58957 100644
--- a/src/common/components/withdraw-routes/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/withdraw-routes/__snapshots__/index.spec.tsx.snap
@@ -197,29 +197,29 @@ Array [
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full route-table"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full route-table"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-2"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-2"
           >
             Account
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-2"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-2"
           >
             Percent
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-2"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-2"
           >
             Automatically power up
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-2"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-2"
           />
         </tr>
       </thead>
diff --git a/src/common/features/ui/button/index.tsx b/src/common/features/ui/button/index.tsx
index f4dcdb684bc..32d00632ded 100644
--- a/src/common/features/ui/button/index.tsx
+++ b/src/common/features/ui/button/index.tsx
@@ -39,7 +39,10 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
 
     const icon = props.icon ? (
       <div
-        className={"flex justify-center items-center w-5 h-5 [&>svg]:w-full " + props.iconClassName}
+        className={classNameObject({
+          "flex justify-center items-center w-5 h-5": true,
+          [props.iconClassName ?? ""]: true
+        })}
       >
         {props.icon}
       </div>
diff --git a/src/common/features/ui/table/index.tsx b/src/common/features/ui/table/index.tsx
index b7624024cfe..7b35b333591 100644
--- a/src/common/features/ui/table/index.tsx
+++ b/src/common/features/ui/table/index.tsx
@@ -45,11 +45,11 @@ export function Th(
       {...props}
       className={classNameObject({
         //Basic
-        "border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2":
+        "border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0":
           true,
 
         // Responsive
-        "text-xs sm:text-sm md:text-md p-1 sm:p-2": true,
+        "text-xs sm:text-sm md:text-base p-1 sm:p-2": true,
 
         // Misc
         [props.className ?? ""]: true
@@ -81,7 +81,7 @@ export function Table(
           "table-auto border-collapse": true,
 
           // Responsive
-          "text-xs sm:text-sm md:text-md": true,
+          "text-xs sm:text-sm md:text-base": true,
 
           // Misc
           "w-full": props.full,
diff --git a/src/common/pages/submit/index.tsx b/src/common/pages/submit/index.tsx
index 9026d1d5b80..264d4b5c860 100644
--- a/src/common/pages/submit/index.tsx
+++ b/src/common/pages/submit/index.tsx
@@ -230,7 +230,7 @@ export function Submit(props: PageProps & MatchProps) {
   }, [tags, title, body]);
 
   useEffect(() => {
-    handleFloatingContainer(showHelp, "submit");
+    handleFloatingContainer(showHelp);
   }, [showHelp]);
 
   useEffect(() => {
@@ -264,7 +264,7 @@ export function Submit(props: PageProps & MatchProps) {
   const handleResize = () => {
     if (typeof window !== "undefined" && window.innerWidth < 992) {
       setShowHelp(false);
-      handleFloatingContainer(false, "submit");
+      handleFloatingContainer(false);
     }
   };
 
diff --git a/src/common/store/global/index.ts b/src/common/store/global/index.ts
index 99515de9ab7..3aeba497125 100644
--- a/src/common/store/global/index.ts
+++ b/src/common/store/global/index.ts
@@ -137,8 +137,11 @@ export const toggleTheme =
     let body: any = document.getElementsByTagName("body");
     if (!body) return;
     body = body[0];
-    body.classList.remove(`theme-${theme}`);
-    body.classList.add(`theme-${newTheme}`);
+    if (theme === "night") {
+      body.classList.remove("dark");
+    } else {
+      body.classList.add("dark");
+    }
   };
 
 export const toggleListStyle =
diff --git a/src/server/template.tsx b/src/server/template.tsx
index ccdcb0d09a3..902808792c4 100644
--- a/src/server/template.tsx
+++ b/src/server/template.tsx
@@ -57,7 +57,7 @@ export const render = (req: express.Request, state: AppState) => {
                 ${linkTags}
                 ${styleTags}
             </head>
-            <body class="${`theme-${state.global.theme}`}" style="display: none;">
+            <body class={state.global.theme === 'night' ? 'dark' : ''} style="display: none;">
                 <div id="root">${markup}</div>
                 <script>
                   window.__PRELOADED_STATE__ = ${serialize(finalState)}
diff --git a/src/style/_markdown.scss b/src/style/_markdown.scss
index 4cfad75aa0f..31c743a0fe9 100644
--- a/src/style/_markdown.scss
+++ b/src/style/_markdown.scss
@@ -109,57 +109,24 @@
   }
 
   table {
-    border-collapse: separate;
-    border-spacing: 1px;
-    margin-bottom: 1rem;
     word-break: normal !important;
     overflow-x: auto;
     display: block;
     width: fit-content;
     max-width: 100%;
 
-    td,
-    th {
-      padding: .5rem;
-    }
-
-    thead {
-      td,
-      th {
-        @include themify(day) {
-          @apply bg-light-400;
-        }
+    @apply border dark:border-gray-700 overflow-hidden table-auto border-collapse text-xs sm:text-sm md:text-base;
 
-        @include themify(night) {
-          @apply bg-blue-metallic;
-        }
-      }
+    tr {
+      @apply [&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300;
     }
 
-    tbody {
-      td,
-      th {
-        @include themify(day) {
-          @apply bg-light-400;
-        }
-
-        @include themify(night) {
-          @apply bg-blue-metallic-10-light;
-        }
-
-        // background-color: $boxBg;
-      }
+    td {
+      @apply border-b border-r dark:border-gray-700 last:border-r-0 p-1 sm:p-2;
     }
-  }
 
-  @include themify(night) {
-    table {
-      td,
-      th {
-        a {
-          @apply text-blue-metallic-20;
-        }
-      }
+    th {
+      @apply border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 sm:text-sm md:text-base p-1 sm:p-2;
     }
   }
 
@@ -178,7 +145,7 @@
   }
 
   ul {
-    list-style: decimal;
+    list-style: inherit;
     padding-left: 40px;
   }