diff --git a/apps/block_scout_web/assets/css/components/_api.scss b/apps/block_scout_web/assets/css/components/_api.scss
index ad56455253..c663993798 100644
--- a/apps/block_scout_web/assets/css/components/_api.scss
+++ b/apps/block_scout_web/assets/css/components/_api.scss
@@ -26,6 +26,17 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
   grid-template-rows: 1fr 1fr 1fr;
   padding: 30px;
   row-gap: 25px;
+
+  @include media-breakpoint-down(md) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+  }
 }
 
 .api-anchors-list-item {
@@ -70,6 +81,10 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
 .api-doc-list-item-contents {
   display: flex;
   justify-content: space-between;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
 }
 
 .api-doc-list-item-title {
@@ -85,6 +100,8 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
   font-size: 12px;
   line-height: 1.2;
   margin-bottom: 20px;
+  word-break: break-all;
+  word-wrap: break-word;
 
   > strong {
     font-weight: 700;
@@ -104,6 +121,13 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
   flex-direction: column;
   flex-grow: 1;
   margin-left: 50px;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-left: 0;
+    padding-top: 25px;
+  }
 }
 
 .api-doc-list-item-controls-badges {
@@ -125,8 +149,101 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
   cursor: pointer;
   font-size: 14px;
   margin-top: auto;
+  white-space: nowrap;
 
   .fa {
     margin-left: 5px;
   }
+}
+
+[aria-expanded="false"] {
+  .api-doc-list-item-controls-view-more-open {
+    display: block;
+  }
+  .api-doc-list-item-controls-view-more-close {
+    display: none;
+  }
+}
+
+[aria-expanded="true"] {
+  .api-doc-list-item-controls-view-more-open {
+    display: none;
+  }
+  .api-doc-list-item-controls-view-more-close {
+    display: block;
+  }
+}
+
+.api-doc-parameters-container {
+  border-top: 1px solid $base-border-color;
+  margin-top: 20px;
+  padding-top: $card-vertical-padding;
+}
+
+.api-doc-parameters-list {
+  border-bottom: 1px solid $base-border-color;
+  margin-bottom: $card-vertical-padding;
+  padding-bottom: $card-vertical-padding / 2;
+  overflow-x: auto;
+}
+
+.api-doc-parameters-list-title {
+  color: #333;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0 0 15px;
+  white-space: nowrap;
+}
+
+.api-doc-parameters-list-item {
+  margin-bottom: 15px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 30px;
+
+    [class*="col-"] {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.api-doc-parameters-list-item-title {
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0 0 8px;
+}
+
+.api-doc-parameters-list-item-subtitle {
+  color: #aaa;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.api-doc-parameters-list-item-description {
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0 0 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  strong {
+    font-weight: 700;
+  }
 }
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex
index 5174adde28..f7611e9f54 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex
@@ -18,217 +18,242 @@
         <span class="badge badge-success api-badge"><%= gettext "GET" %></span>
         <span class="badge badge-neutral api-badge"><%= gettext "POST" %></span>
       </div>
-      <span class="api-doc-list-item-controls-view-more">More Details <span class="fa fa-chevron-down"></span></span>
+      <span class="api-doc-list-item-controls-view-more">
+        <span class="api-doc-list-item-controls-view-more-open">More Details <span class="fa fa-chevron-down"></span></span>
+        <span class="api-doc-list-item-controls-view-more-close">Hide Details <span class="fa fa-chevron-up"></span></span>
+      </span>
     </div>
   </div>
+  <!-- Parameters -->
   <div
-    class="collapse multi-collapse"
+    class="collapse multi-collapse api-doc-parameters-container"
     id="<%= action_tile_id(@module_name, @action.name) %>"
   >
-    <div class="pt-3">
-      <h4 class="text-primary my-4"><%= gettext "Parameters" %> <button
-          data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api" %>"
-          role="button"
-          class="button button-xs button-primary float-right"
-          style="width: 8rem"
-          data-module="<%= @module_name %>"
-          data-action="<%= @action.name %>"
-        ><%= gettext "Try it out" %></button>
-        <button
-          data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>"
-          role="button"
-          class="collapse button button-xs button-secondary float-right"
-          style="width: 8rem"
-          data-module="<%= @module_name %>"
-          data-action="<%= @action.name %>"
-        ><%= gettext "Cancel" %></button>
-      </h4>
-      <div class="mb-4">
-        <dl class="row">
-          <dt class="col-2 text-muted d-none d-md-block"><%= gettext "Name" %></dt>
-          <dt class="col-10 text-muted d-none d-md-block"><%= gettext "Description" %></dt>
-        </dl>
-        <dl class="row">
-          <dd class="col-sm-4 col-md-2">
-            <div class=""> <%= gettext "Module" %> <span class="text-danger"> *
-                <small><%= gettext "required" %></small>
-              </span>
-            </div>
-            <span class="text-muted"><%= gettext "string" %> <em><%= gettext "(query)" %></em></span>
-          </dd>
-          <dd class="col-sm-8 col-md-10"> <%= gettext "A string with the name of the module to be invoked." %>
-            <em><%= gettext "Must be set to:" %></em> <%= @module_name %> </dd>
-        </dl>
-        <dl class="row">
-          <dd class="col-sm-4 col-md-2">
-            <div class=""> <%= gettext "Action" %> <span class="text-danger"> *
-                <small><%= gettext "required" %></small>
-              </span>
-            </div>
-            <span class="text-muted"><%= gettext "string" %><em><%= gettext "(query)" %></em></span>
-          </dd>
-          <dd class="col-sm-8 col-md-10"> <%= gettext "A string with the name of the action to be invoked." %>
-            <em><%= gettext "Must be set to:" %></em> <%= @action.name %> </dd>
-        </dl> <%= for required_param <- @action.required_params do %> <dl class="row">
-          <dd class="col-sm-4 col-md-2"> <%= required_param.key %> <span class="align-text-bottom text-danger"> *
-              <small><%= gettext "required" %></small>
-            </span>
-            <div class="text-muted"><%= required_param.type %> <em><%= gettext "(query)" %></em></div>
-          </dd>
-          <dd class="col-sm-8 col-md-10"> <%= required_param.description %> <div class="form-group has-danger">
-              <input
-                data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>"
-                data-required="true"
-                type="text"
-                class="collapse form-control form-control-danger is-invalid"
-                placeholder="<%= input_placeholder(required_param) %>"
-                data-parameter-key="<%= required_param.key %>"
-              >
-            </div>
-          </dd>
-        </dl> <% end %> <%= for optional_param <- @action.optional_params do %> <dl class="row">
-          <dd class="col-sm-4 col-md-2">
-            <div><%= optional_param.key %></div>
-            <span class="text-muted"><%= optional_param.type %> <em><%= gettext "(query)" %></em></span>
-          </dd>
-          <dd class="col-sm-8 col-md-10"> <%= optional_param.description %> <input
-              data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>"
+    <h3 class="card-title margin-bottom-md">
+      <%= gettext "Parameters" %>
+      <button
+        class="btn-full-primary float-right"
+        data-action="<%= @action.name %>"
+        data-module="<%= @module_name %>"
+        data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api" %>'
+        role="button"
+      ><%= gettext "Try it out" %></button>
+      <button
+        class="collapse btn-line float-right"
+        data-action="<%= @action.name %>"
+        data-module="<%= @module_name %>"
+        data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>'
+        role="button"
+      ><%= gettext "Cancel" %></button>
+    </h3>
+    <!-- Parameters description list -->
+    <div class="api-doc-parameters-list">
+      <div class="row d-none d-md-flex">
+        <h4 class="col-2 api-doc-parameters-list-title"><%= gettext "Name" %></h4>
+        <h3 class="col-10 api-doc-parameters-list-title"><%= gettext "Description" %></h3>
+      </div>
+      <!-- Module -->
+      <div class="row api-doc-parameters-list-item">
+        <div class="col-sm-4 col-md-2">
+          <h5 class="api-doc-parameters-list-item-title"><%= gettext "Module" %> <span class="text-danger">*<small><%= gettext "required" %></small></span></h5>
+          <p class="api-doc-parameters-list-item-subtitle"><%= gettext "string" %> <em><%= gettext "(query)" %></em></p>
+        </div>
+        <div class="col-sm-8 col-md-10">
+          <p  class="api-doc-parameters-list-item-description"><%= gettext "A string with the name of the module to be invoked." %></p>
+          <p class="api-doc-parameters-list-item-description"><strong><%= gettext "Must be set to:" %></strong> <em><%= @module_name %></em>
+        </div>
+      </div>
+      <!-- Action -->
+      <div class="row api-doc-parameters-list-item">
+        <div class="col-sm-4 col-md-2">
+          <h5 class="api-doc-parameters-list-item-title"><%= gettext "Action" %> <span class="text-danger">*<small><%= gettext "required" %></small></span></h5>
+          <p class="api-doc-parameters-list-item-subtitle"><%= gettext "string" %> <em><%= gettext "(query)" %></em></p>
+        </div>
+        <div class="col-sm-8 col-md-10">
+          <p  class="api-doc-parameters-list-item-description"><%= gettext "A string with the name of the action to be invoked." %></p>
+          <p  class="api-doc-parameters-list-item-description"><strong><%= gettext "Must be set to:" %></strong> <em><%= @action.name %></em></p>
+        </div>
+      </div>
+      <!-- Other -->
+      <%= for required_param <- @action.required_params do %>
+      <div class="row api-doc-parameters-list-item">
+        <div class="col-sm-4 col-md-2">
+          <h5 class="api-doc-parameters-list-item-title"><%= required_param.key %> <span class="align-text-bottom text-danger">*<small><%= gettext "required" %></small></span></h5>
+          <p class="api-doc-parameters-list-item-subtitle"><%= required_param.type %> <em><%= gettext "(query)" %></em></p>
+        </div>
+        <div class="col-sm-8 col-md-10">
+          <p  class="api-doc-parameters-list-item-description"><%= required_param.description %></p>
+          <div class="form-group has-danger mb-0">
+            <input
+              data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui" %>'
+              data-required="true"
               type="text"
-              class="collapse form-control"
-              placeholder="<%= input_placeholder(optional_param) %>"
-              data-parameter-key="<%= optional_param.key %>"
-            >
-          </dd>
-        </dl> <% end %> <div class="row">
-          <div class="col-sm-2 offset-sm-4 col-md-2 offset-md-2">
-            <button
-              data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>"
-              data-try-api-ui-button-type="execute"
-              role="button"
-              class="collapse button button-primary w-100"
-              data-module="<%= @module_name %>"
-              data-action="<%= @action.name %>"
-            ><%= gettext "Execute" %></button>
+              class="collapse form-control form-control-danger is-invalid"
+              placeholder="<%= input_placeholder(required_param) %>"
+              data-parameter-key="<%= required_param.key %>"
+            />
           </div>
-          <div class="col-sm-2 col-md-2 mt-2 mt-md-0">
-            <button
-              role="button"
-              class="collapse button button-secondary w-100"
-              data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>"
-              data-module="<%= @module_name %>"
-              data-action="<%= @action.name %>"
-            ><%= gettext "Clear" %></button>
+        </div>
+      </div>
+      <% end %>
+      <!-- Other / Extra -->
+      <%= for optional_param <- @action.optional_params do %>
+      <div class="row api-doc-parameters-list-item">
+        <div class="col-sm-4 col-md-2">
+          <h5 class="api-doc-parameters-list-item-title"><%= optional_param.key %></h2>
+          <p class="api-doc-parameters-list-item-subtitle"><%= optional_param.type %> <em><%= gettext "(query)" %></em></p>
+        </div>
+        <div class="col-sm-8 col-md-10">
+          <p class="api-doc-parameters-list-item-description"><%= optional_param.description %></p>
+          <input
+            class="collapse form-control"
+            data-parameter-key="<%= optional_param.key %>"
+            data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui" %>'
+            placeholder="<%= input_placeholder(optional_param) %>"
+            type="text"
+          />
+        </div>
+      </div>
+      <% end %>
+      <!-- Buttons for Other / Extra -->
+      <div class="row">
+        <div class="col-sm-2 offset-sm-4 col-md-2 offset-md-2">
+          <button
+            class="collapse button button-primary w-100"
+            data-action="<%= @action.name %>"
+            data-module="<%= @module_name %>"
+            data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui" %>'
+            data-try-api-ui-button-type="execute"
+            role="button"
+          ><%= gettext "Execute" %></button>
+        </div>
+        <div class="col-sm-2 col-md-2 mt-2 mt-md-0">
+          <button
+            class="collapse button button-secondary w-100"
+            data-action="<%= @action.name %>"
+            data-module="<%= @module_name %>"
+            data-selector='<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>'
+            role="button"
+          ><%= gettext "Clear" %></button>
+        </div>
+      </div>
+      <!-- CURL / Request URL / Server Response -->
+      <div
+        class="tile text-dark mt-5 collapse"
+        data-selector='<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>'
+      >
+        <div class="mb-3">
+          <h5 class="api-doc-parameters-list-item-title"><%= gettext "Curl" %></h5>
+          <div class="tile tile-muted p-1">
+            <pre
+              class="m-2"
+              data-selector='<%= "#{@module_name}-#{@action.name}-curl" %>'
+            ></pre>
           </div>
         </div>
-        <!-- /btn-group -->
-        <div
-          class="tile text-dark mt-5 collapse"
-          data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>"
-        >
-          <div class="mb-3">
-            <h5 class=""><%= gettext "Curl" %></h5>
-            <div class="tile tile-muted p-1">
-              <pre
-                data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>"
-                class="m-2"
-              ></pre>
+        <div class="mb-4">
+          <h5 class="api-doc-parameters-list-item-title"><%= gettext "Request URL" %></h5>
+          <div class="tile tile-muted p-1">
+            <pre
+              class="m-2"
+              data-selector='<%= "#{@module_name}-#{@action.name}-request-url" %>'
+            ></pre>
+          </div>
+        </div>
+        <h5 class="api-doc-parameters-list-item-title"><%= gettext "Server Response" %></h5>
+        <div class="row">
+          <h4 class="col-2 api-doc-parameters-list-title"><%= gettext "Code" %></h4>
+          <h4 class="col-10 api-doc-parameters-list-title"><%= gettext "Details" %></h4>
+        </div>
+        <div class="row">
+          <div
+            class="col-2 pr-0 pr-md-2 col-md-2"
+          ><strong data-selector='<%= "#{@module_name}-#{@action.name}-server-response-code" %>'></strong></div>
+          <div class="col-10 col-md-10">
+            <p class="api-doc-parameters-list-item-description"><%= gettext "Response Body" %></p>
+              <div class="tile tile-muted p-1 card-server-response-body">
+                <pre
+                  class="m-2"
+                  data-selector='<%= "#{@module_name}-#{@action.name}-server-response-body" %>'
+                ></pre>
             </div>
           </div>
-          <div class="mb-4">
-            <h5><%= gettext "Request URL" %></h5>
+        </div>
+      </div>
+    </div>
+    <!-- Responses -->
+    <h3 class="card-title margin-bottom-md"><%= gettext "Responses" %></h3>
+    <div class="row api-doc-parameters-list-item mb-0">
+      <h4 class="col-2 api-doc-parameters-list-title"><%= gettext "Code" %></h4>
+      <h5 class="col-10 api-doc-parameters-list-title"><%= gettext "Description" %></h5>
+    </div>
+    <%= for {response, index} <- Enum.with_index(@action.responses) do %>
+    <div class="row api-doc-parameters-list-item">
+      <div class="col-2 pr-0 pr-md-2"><strong><%= response.code %></strong></div>
+      <div class="col-10">
+        <div class="tile tile-muted p-1 mb-3">
+          <pre class="m-2"><strong><%= response.description %></strong></pre>
+        </div>
+        <!-- Tabs -->
+        <ul
+          class="nav nav-pills mb-3"
+          role="tablist"
+        >
+          <li class="nav-item">
+            <a
+              aria-controls='<%= "#{@module_name}-#{@action.name}-example-value" %>'
+              aria-selected="true"
+              class="nav-link api-doc-tab active"
+              data-toggle="pill"
+              href='#<%= "#{@module_name}-#{@action.name}-example-value" %>'
+              id='<%= "#{@module_name}-#{@action.name}-example-value-tab" %>'
+              role="tab"
+            ><%= gettext "Example Value" %></a>
+          </li>
+          <%= if index == 0 do %>
+          <li class="nav-item">
+            <a
+              aria-controls='<%= "#{@module_name}-#{@action.name}-model" %>'
+              aria-selected="false"
+              class="nav-link api-doc-tab"
+              data-toggle="pill"
+              href='#<%= "#{@module_name}-#{@action.name}-model" %>'
+              id='<%= "#{@module_name}-#{@action.name}-model-tab" %>'
+              role="tab"
+            ><%= gettext "Model" %></a>
+          </li>
+          <% end %>
+        </ul>
+        <!-- Tab Content -->
+        <div class="tab-content">
+          <!-- Example Value Tab -->
+          <div
+            aria-labelledby='<%= "#{@module_name}-#{@action.name}-example-value-tab" %>'
+            class="tab-pane fade show active"
+            id='<%= "#{@module_name}-#{@action.name}-example-value" %>'
+            role="tabpanel"
+          >
             <div class="tile tile-muted p-1">
               <pre
-                data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>"
                 class="m-2"
+                data-json='<%= response.example_value %>'
               ></pre>
             </div>
           </div>
-          <div>
-            <h5><%= gettext "Server Response" %></h5>
-            <dl class="row">
-              <dt class="col-2 pr-0 pr-md-2 text-muted"><%= gettext "Code" %></dt>
-              <dt class="col-10 text-muted"><%= gettext "Details" %></dt>
-            </dl>
-            <dl class="row">
-              <dd
-                class="col-2 pr-0 pr-md-2 col-md-2"
-                data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>"
-              >
-              </dd>
-              <dd class="col-10 col-md-10"> <%= gettext "Response Body" %> <div
-                  class="tile tile-muted p-1 card-server-response-body"
-                >
-                  <pre
-                    data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>"
-                    class="m-2"
-                  ></pre>
-                </div>
-              </dd>
-            </dl>
+          <%= if index == 0 do %>
+          <!-- Model Tab -->
+          <div
+            aria-labelledby='<%= "#{@module_name}-#{@action.name}-model-tab" %>'
+            class="tab-pane fade"
+            id='<%= "#{@module_name}-#{@action.name}-model" %>'
+            role="tabpanel"
+          >
+            <%= render "_model_table.html", model: response.model %>
           </div>
-        </div> <!-- /*-try-api-ui-result -->
-        <hr />
-      </div> <!-- /Descriptor container -->
-      <h4 class="text-primary my-4"><%= gettext "Responses" %></h4>
-      <div>
-        <dl class="row">
-          <dt class="col-2 pr-0 pr-md-2 text-muted"><%= gettext "Code" %></dt>
-          <dt class="col-10 text-muted"><%= gettext "Description" %></dt>
-        </dl> <%= for {response, index} <- Enum.with_index(@action.responses) do %> <dl class="row">
-          <dd class="col-2 pr-0 pr-md-2"> <%= response.code %> </dd>
-          <dd class="col-10">
-            <div class="tile tile-muted p-1 mb-3">
-              <pre class="m-2"><strong><%= response.description %></strong></pre>
-            </div>
-            <ul
-              class="nav nav-pills mb-3"
-              role="tablist"
-            >
-              <li class="nav-item">
-                <a
-                  class="nav-link api-doc-tab active"
-                  id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
-                  data-toggle="pill"
-                  href="#<%= "#{@module_name}-#{@action.name}-example-value" %>"
-                  role="tab"
-                  aria-controls="<%= "#{@module_name}-#{@action.name}-example-value" %>"
-                  aria-selected="true"
-                > <%= gettext "Example Value" %> </a>
-              </li> <%= if index == 0 do %> <li class="nav-item">
-                <a
-                  class="nav-link api-doc-tab"
-                  id="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
-                  data-toggle="pill"
-                  href="#<%= "#{@module_name}-#{@action.name}-model" %>"
-                  role="tab"
-                  aria-controls="<%= "#{@module_name}-#{@action.name}-model" %>"
-                  aria-selected="false"
-                > <%= gettext "Model" %> </a>
-              </li> <% end %>
-            </ul>
-            <div class="tab-content">
-              <div
-                class="tab-pane fade show active"
-                id="<%= "#{@module_name}-#{@action.name}-example-value" %>"
-                role="tabpanel"
-                aria-labelledby="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
-              >
-                <div class="tile tile-muted p-1">
-                  <pre
-                    class="m-2"
-                    data-json='<%= response.example_value %>'
-                  ></pre>
-                </div>
-              </div> <!-- /tab-pane --> <%= if index == 0 do %> <div
-                class="tab-pane fade"
-                id="<%= "#{@module_name}-#{@action.name}-model" %>"
-                role="tabpanel"
-                aria-labelledby="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
-              > <%= render "_model_table.html", model: response.model %> </div> <!-- /tab-pane --> <% end %>
-            </div> <!-- /tab-content -->
-          </dd>
-        </dl> <% end %>
+          <% end %>
+        </div>
       </div>
     </div>
+    <% end %>
   </div>
 </div>
\ No newline at end of file