diff --git a/res/themes/ui.toml b/res/themes/ui.toml
index e32726f..6e1d8f4 100644
--- a/res/themes/ui.toml
+++ b/res/themes/ui.toml
@@ -1325,6 +1325,9 @@ wallet-btn-padding = { size = 24.0 }
 rpc-label-min-width = { size = 70.0 }
 rpc-label-width = { size = 85.0 }
 security-combo-width = { size = 120.0 }
+# Node & Security: below this card-content width the NODE + SECURITY columns stack
+# vertically (full width each) instead of sitting side by side.
+node-sec-stack-width = { size = 600.0 }
 port-input-min-width = { size = 60.0 }
 port-input-width-ratio = { size = 0.4 }
 idle-combo-width = { size = 64.0 }
diff --git a/src/ui/pages/settings_page.cpp b/src/ui/pages/settings_page.cpp
index 8948ff5..41987b3 100644
--- a/src/ui/pages/settings_page.cpp
+++ b/src/ui/pages/settings_page.cpp
@@ -1508,14 +1508,18 @@ void RenderSettingsPage(App* app) {
             return std::max(minBtnW, maxTextW + btnPad * 2);
         };
 
-        // --- NODE (left) + SECURITY (right) side by side ---
+        // --- NODE + SECURITY: side by side when wide, stacked when narrow ---
         {
             float colGap = Layout::spacingLg();
-            float leftColW = (contentW - colGap) * 0.6f;
-            float rightColW = (contentW - colGap) * 0.4f;
+            // Responsive: below this content width the two columns get too cramped (the RPC
+            // grid especially), so stack them into one full-width column instead.
+            float stackWidth = S.drawElement("components.settings-page", "node-sec-stack-width").sizeOr(600.0f);
+            bool stacked = contentW < stackWidth;
+            float leftColW  = stacked ? contentW : (contentW - colGap) * 0.6f;
+            float rightColW = stacked ? contentW : (contentW - colGap) * 0.4f;
             ImVec2 sectionOrigin = ImGui::GetCursorScreenPos();
             float leftX = sectionOrigin.x;
-            float rightX = sectionOrigin.x + leftColW + colGap;
+            float rightX = stacked ? sectionOrigin.x : (sectionOrigin.x + leftColW + colGap);
 
             // ---- LEFT COLUMN: NODE ----
             ImGui::SetCursorScreenPos(ImVec2(leftX, sectionOrigin.y));
@@ -2025,9 +2029,11 @@ void RenderSettingsPage(App* app) {
             ImGui::PopClipRect();
 
             // ---- RIGHT COLUMN: SECURITY ----
-            ImGui::SetCursorScreenPos(ImVec2(rightX, sectionOrigin.y));
-            ImGui::PushClipRect(ImVec2(rightX, sectionOrigin.y),
-                                ImVec2(rightX + rightColW, sectionOrigin.y + 9999), true);
+            // Stacked: flows below the left column; side-by-side: aligned to the section top.
+            float rightTopY = stacked ? (leftBottom + Layout::spacingMd()) : sectionOrigin.y;
+            ImGui::SetCursorScreenPos(ImVec2(rightX, rightTopY));
+            ImGui::PushClipRect(ImVec2(rightX, rightTopY),
+                                ImVec2(rightX + rightColW, rightTopY + 9999), true);
 
             Type().textColored(TypeStyle::Overline, OnSurfaceMedium(), TR("security"));
             ImGui::Dummy(ImVec2(0, Layout::spacingXs()));