diff --git a/common/common.scss b/common/common.scss
index d199793..61e53ce 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -157,18 +157,24 @@
   }
 
   .post-bottom-wrapper {
-    padding: 1em 0.5em 0 0.5em;
     a {
       color: var(--primary-med-or-secondary-med);
     }
   }
-  .d-toc {
-    margin-top: 1em;
-  }
 }
 
 // large screens
 @media screen and (min-width: $large-width) {
+  .d-toc {
+    margin-top: 1em;
+  }
+  .post-bottom-wrapper {
+    padding: 1em 0.5em 0 0.5em;
+    &.mobile {
+      display: none;
+    }
+  }
+
   .d-toc-toggle {
     display: none !important;
   }
@@ -232,7 +238,10 @@
 @media screen and (max-width: $large-width) {
   .d-toc-regular {
     .post-bottom-wrapper {
-      display: none;
+      padding: 1em 0.75em;
+      &.desktop {
+        display: none;
+      }
     }
     #d-toc {
       z-index: z("header") + 1;
@@ -272,7 +281,7 @@
     .d-toc-close-wrapper {
       height: 3em;
       background: var(--secondary, $secondary);
-
+      color: var(--primary-med-or-secondary-med);
       margin-bottom: 1em;
       position: -webkit-sticky;
       position: sticky;
@@ -280,11 +289,8 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      :not(.rtl) & {
-        padding-right: 1em;
-      }
-      .rtl & {
-        padding-left: 1em;
+      .d-toc-close {
+        padding: 1em 0.75em;
       }
     }
     .d-toc-toggle {
diff --git a/common/header.html b/common/header.html
index 2a1e23c..912e0f7 100644
--- a/common/header.html
+++ b/common/header.html
@@ -152,7 +152,7 @@
 
         $("#main").on(
           "click.toggleDtoc",
-          ".d-toc-toggle, .d-toc-close",
+          ".d-toc-toggle, .d-toc-close, .post-bottom-wrapper a",
           dtocMobile
         );
 
@@ -310,8 +310,8 @@
           .addClass("d-toc-cooked")
           .prepend(
             `<span class="d-toc-toggle">
-                    ${dtocIcon} ${I18n.t(themePrefix("table_of_contents"))}
-                    </span>`
+                      ${dtocIcon} ${I18n.t(themePrefix("table_of_contents"))}
+                      </span>`
           )
           .parents(".regular")
           .addClass("d-toc-regular")
@@ -319,20 +319,25 @@
           .addClass("d-toc-article")
           .append(
             `<div class="d-toc-main">
-                <div class="post-bottom-wrapper">
-                  <a href="#bottom-anchor" title="${I18n.t(
-                    themePrefix("post_bottom_tooltip")
-                  )}">${iconHTML("bottom")}</a>
-                  </div>
-                  <ul id="d-toc">
-                        <div class="d-toc-close-wrapper">
-                          <div class="d-toc-close">
-                            ${closeIcon}
+                  <div class="post-bottom-wrapper dekstop">
+                    <a href="#bottom-anchor" title="${I18n.t(
+                      themePrefix("post_bottom_tooltip")
+                    )}">${iconHTML("bottom")}</a>
+                    </div>
+                    <ul id="d-toc">
+                          <div class="d-toc-close-wrapper mobile">
+                            <div class="post-bottom-wrapper">
+                              <a href="#bottom-anchor" title="${I18n.t(
+                                themePrefix("post_bottom_tooltip")
+                              )}">${iconHTML("bottom")}</a>
+                              </div>
+                            <div class="d-toc-close">
+                              ${closeIcon}
+                            </div>
                           </div>
-                        </div>
-                      </ul>
-                </div>
-            `
+                        </ul>
+                  </div>
+              `
           )
 
           .parents(".topic-post")