diff --git a/assets/images/core-launch.png b/assets/images/core-launch.png
index 6892cd2e30e..0af20cb18cd 100644
Binary files a/assets/images/core-launch.png and b/assets/images/core-launch.png differ
diff --git a/static/js/page/api/api.scss b/static/js/page/api/api.scss
index 4014c8a8b6c..df12b8818c4 100644
--- a/static/js/page/api/api.scss
+++ b/static/js/page/api/api.scss
@@ -332,8 +332,6 @@ $jvm-enrichment: JRE7, JRE8, JUnit, JUnit5, TestNG;
     padding: 0;
 }
 
-.api-docs-to-core_closed { display: none; }
-
 .api-docs-to-core__link {
     display: flex;
     align-items: stretch;
@@ -381,9 +379,6 @@ $jvm-enrichment: JRE7, JRE8, JUnit, JUnit5, TestNG;
 .api-docs-to-core_hover .api-docs-to-core__text {
     animation-name: rocket-in, rocket-out;
 }
-.page_js_no .api-docs-to-core__close {
-    display: none;
-}
 
 .api-docs-to-core__close {
     position: absolute;
@@ -402,5 +397,99 @@ $jvm-enrichment: JRE7, JRE8, JUnit, JUnit5, TestNG;
     box-sizing: border-box;
 }
 
+.api-docs-to-core-mobile {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 12px;
+    background: linear-gradient(108.46deg, #7F52FF 0%, #A852FF 10.78%, #7F52FF 100%);
+    border-radius: 8px;
+    width: 456px;
+    z-index: 100;
+    color: #fff;
+}
+
+@media (max-width: 479px) {
+    .api-docs-to-core-mobile {
+        left: 12px;
+        right: 12px;
+        transform: none;
+        width: auto;
+    }
+}
+
+.api-docs-to-core-mobile__text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 24px 12px;
+}
+
+.api-docs-to-core-mobile__text::before {
+    display: block;
+    content: '';
+    background: url("/assets/images/core-launch.png") center center no-repeat;
+    background-size: 48px;
+    height: 48px;
+    width: 48px;
+}
+
+.api-docs-to-core-mobile__controls {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    flex-wrap: wrap;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    min-height: 52px;
+}
+
+.api-docs-to-core__text, .api-docs-to-core-mobile__text {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.0015em;
+    text-align: center;
+}
+
+.api-docs-to-core-mobile__link, .api-docs-to-core-mobile__link:hover,
+.api-docs-to-core-mobile__close, .api-docs-to-core-mobile__close:hover {
+    flex: 1 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 8px;
+
+    background-color: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    text-decoration: none;
+
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.0045em;
+}
+
+.api-docs-to-core, .api-docs-to-core-mobile {
+    font-family: "JetBrains Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Droid Sans", "Helvetica Neue", Arial, sans-serif
+}
+
+.api-docs-to-core-mobile__link:hover, .api-docs-to-core-mobile__close:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.api-docs-to-core-mobile__close {
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    margin-left: -1px;
+}
+
+.api-docs-to-core-closed {
+    display: none;
+}
+
 @media (max-width: 704px) { .api-docs-to-core { display: none; } }
 @media (min-width: 705px) { .api-docs-to-core-mobile { display: none; } }
diff --git a/templates/api.html b/templates/api.html
index 5b3818e73cb..761c3455a1b 100644
--- a/templates/api.html
+++ b/templates/api.html
@@ -19,26 +19,46 @@
 {% block top_banner %}
     <p class="api-docs-to-core">
         <a class="api-docs-to-core__link" href="{{ newDocsLink }}" target="_blank">
-            <span class="api-docs-to-core__text">Try docs with the new design →</span>
+            <span class="api-docs-to-core__text">Try the revamped Kotlin docs design&nbsp;→</span>
         </a>
-        <button type="button" class="api-docs-to-core__close">
+        <button type="button" class="api-docs-to-core__close api-docs-to-core-close">
             <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M6.61589 23.0428L14.0137 15.6461L21.4115 23.0428L23.0554 21.399L15.6576 14.0023L23.0554 6.60444L21.4115 4.96061L14.0137 12.3584L6.61589 4.95947L4.97205 6.6033L12.3699 14.0023L4.97322 21.399L6.61589 23.0428Z" fill="white"/>
             </svg>
         </button>
     </p>
+    <div class="api-docs-to-core-mobile">
+        <p class="api-docs-to-core-mobile__text">Try the revamped Kotlin docs design!</p>
+        <div class="api-docs-to-core-mobile__controls">
+            <a class="api-docs-to-core-mobile__link" href="{{ newDocsLink }}" target="_blank">Let’s&nbsp;go</a>
+            <button type="button" class="api-docs-to-core-mobile__close api-docs-to-core-close">No&nbsp;thanks</button>
+        </div>
+    </div>
     <script>
         (function() {
-            document.querySelector('.api-docs-to-core').addEventListener('mouseover', function(e) {
-                e.currentTarget.classList.add('api-docs-to-core_hover');
+            document.querySelectorAll('.api-docs-to-core').forEach(function(node) {
+                node.addEventListener('mouseover', function(e) {
+                    e.currentTarget.classList.add('api-docs-to-core_hover');
+                })
             });
-            document.querySelector('.api-docs-to-core__close').addEventListener('click', function(e) {
-                e.currentTarget.parentNode.classList.add('api-docs-to-core_closed');
-                window.localStorage.setItem('api-docs-to-core', 'yes');
+            document.querySelectorAll('.api-docs-to-core-close').forEach(function(node) {
+                node.addEventListener('click', function(e) {
+                    var node = e.currentTarget;
+
+                    while (node && !(node.classList.contains('api-docs-to-core') || node.classList.contains('api-docs-to-core-mobile'))) {
+                        node = node.parentNode;
+                    }
+
+                    if (node) {
+                        node.classList.add('api-docs-to-core-closed');
+                        window.localStorage.setItem('api-docs-to-core', 'yes');
+                    }
+                });
             });
             if(window.localStorage.getItem('api-docs-to-core') === 'yes') document
-                .querySelector('.api-docs-to-core').classList
-                    .add('api-docs-to-core_closed');
+                .querySelectorAll('.api-docs-to-core,.api-docs-to-core-mobile').forEach(function(node) {
+                    node.classList.add('api-docs-to-core-closed');
+                });
         })();
     </script>
 {% endblock %}