diff --git a/src/pages/docs/_sub/HomeBanner/Component.astro b/src/pages/docs/_sub/HomeBanner/Component.astro
index 4ee420ab..f35461e3 100644
--- a/src/pages/docs/_sub/HomeBanner/Component.astro
+++ b/src/pages/docs/_sub/HomeBanner/Component.astro
@@ -17,15 +17,15 @@ const resources = [
       {
         resources.map((resource, index) => (
           <li>
-            {index > 0 && (
-              <span class={s.divider} aria-hidden="true">
-                ·
-              </span>
-            )}
             <a href={resource.href} class={s.link}>
               {resource.title}
               <Svg name="icons/regular/arrow-up-right-from-square" />
             </a>
+            {index < resources.length - 1 && (
+              <span class={s.divider} aria-hidden="true">
+                ·
+              </span>
+            )}
           </li>
         ))
       }
diff --git a/src/pages/docs/_sub/HomeBanner/style.module.css b/src/pages/docs/_sub/HomeBanner/style.module.css
index fa19d73b..ce04cfdd 100644
--- a/src/pages/docs/_sub/HomeBanner/style.module.css
+++ b/src/pages/docs/_sub/HomeBanner/style.module.css
@@ -21,6 +21,12 @@
   gap: 8px 14px;
   font-size: 14px;
   line-height: 1.3;
+
+  @media (width < 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px 0;
+  }
 }
 
 .headline {
@@ -46,10 +52,20 @@
     align-items: center;
     gap: 14px;
   }
+
+  @media (width < 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px 0;
+  }
 }
 
 .divider {
   color: var(--light-body-color);
+
+  @media (width < 600px) {
+    display: none;
+  }
 }
 
 .link {