diff --git a/apps/block_scout_web/assets/css/components/_nav_tabs.scss b/apps/block_scout_web/assets/css/components/_nav_tabs.scss
index d52ddd23c0..90e4d0e736 100644
--- a/apps/block_scout_web/assets/css/components/_nav_tabs.scss
+++ b/apps/block_scout_web/assets/css/components/_nav_tabs.scss
@@ -29,3 +29,13 @@
   background-color: darken($primary, 10%);
   border-color: darken($primary, 10%);
 }
+
+.api-doc-tab {
+  padding-bottom: 5px;
+  color: $primary !important;
+  background-color: transparent !important;
+}
+
+.api-doc-tab.active {
+  border-bottom: 1px solid $primary;
+}
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 7a5139bef3..4d9eebfbe3 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
@@ -19,198 +19,190 @@
           <button data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-cancel" %>" role="button" class="collapse btn btn-sm btn-outline-secondary float-right" style="width: 8rem" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Cancel</button>
         </h4>
 
-        <div class="table-responsive">
-          <table class="table">
-            <thead>
-              <tr>
-                <th scope="col">Name</th>
-                <th scope="col">Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">
-                  module
-                  <span class="text-danger">
-                    * <small>required</small>
-                  </span>
-                  <span class="row col font-weight-light">string</span>
-                  <em class="row col text-muted">(query)</em>
-                </th>
-                <td>
+        <div class="mb-4">
+              <dl class="row">
+                <dt class="col-sm-4 col-md-2 text-muted">Name</dt>
+                <dt class="col-sm-8 col-md-10 text-muted">Description</dt>
+              </dl>
+              <dl class="row">
+                <dd class="col-sm-4 col-md-2">
+                  <div class="">
+                    Module
+                    <span class="text-danger">
+                      * <small>required</small>
+                    </span>
+                  </div>
+                  <span class="text-muted">string <em>(query)</em></span>
+                </dd>
+                <dd class="col-sm-8 col-md-10">
                   A string with the name of the module to be invoked.
                   <em>Must be set to:</em> <%= @module_name %>
-                </td>
-              </tr>
-              <tr>
-                <th scope="row">
-                  action
-                  <span class="align-text-bottom text-danger">
-                    * <small>required</small>
-                  </span>
-                  <span class="row col font-weight-light">string</span>
-                  <em class="row col text-muted">(query)</em>
-                </th>
-                <td>
+                </dd>
+              </dl>
+              <dl class="row">
+                <dd class="col-sm-4 col-md-2">
+                  <div class="">
+                   Action
+                   <span class="text-danger">
+                     * <small>required</small>
+                   </span>
+                 </div>
+                  <span class="text-muted">string <em>(query)</em></span>
+                </dd>
+                <dd class="col-sm-8 col-md-10">
                   A string with the name of the action to be invoked.
                   <em>Must be set to:</em> <%= @action.name %>
-                </td>
-              </tr>
-              <tr>
+                </dd>
+              </dl>
+              <dl class="row">
                 <%= for required_param <- @action.required_params do %>
-                  <th scope="row">
-                    <%= required_param.key %>
-                    <span class="align-text-bottom text-danger">
-                      * <small>required</small>
-                    </span>
-                    <span class="row col font-weight-light"><%= required_param.type %></span>
-                    <em class="row col text-muted">(query)</em>
-                  </th>
-                  <td>
+                  <dd class="col-sm-4 col-md-2">
+                    <div class="">
+                      <%= required_param.key %>
+                      <span class="align-text-bottom text-danger">
+                        * <small>required</small>
+                      </span>
+                    </div>
+                    <span class="text-muted"><%= required_param.type %> <em>(query)</em></span>
+                  </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>
-                  </td>
-              </tr>
+                  </dd>
+                </dl>
             <% end %>
             <%= for optional_param <- @action.optional_params do %>
-              <th scope="row">
-                <%= optional_param.key %>
-                <span class="row col font-weight-light"><%= optional_param.type %></span>
-                <em class="row col text-muted">(query)</em>
-              </th>
-              <td>
+            <dl class="row">
+              <dd class="col-sm-4 col-md-2">
+                <div><%= optional_param.key %></div>
+                <span class="text-muted"><%= optional_param.type %> <em>(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" %>" type="text" class="collapse form-control" placeholder="<%= input_placeholder(optional_param) %>" data-parameter-key="<%= optional_param.key %>">
-              </td>
-              </tr>
+              </dd>
+          </dl>
             <% end %>
-            </tbody>
-          </table>
-
-          <div class="btn-group m-1 d-flex" role="group">
-            <button data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui" %>" data-try-api-ui-button-type="execute" role="button" class="collapse btn btn-primary w-100" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Execute</button>
-            <button role="button" class="collapse btn btn-outline-secondary w-100" data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Clear</button>
-          </div> <!-- /btn-group -->
-
-        </div> <!-- /table-responsive -->
+            <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 btn btn-primary w-100" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Execute</button>
+              </div>
+              <div class="col-sm-2 col-md-2">
+                <button role="button" class="collapse btn btn-outline-secondary" data-selector="<%= "#{@module_name}-#{@action.name}-btn-try-api-clear" %>" data-module="<%= @module_name %>" data-action="<%= @action.name %>">Clear</button>
+              </div>
+            </div>
+     <!-- /btn-group -->
+
+        </div> <!-- /Descriptor container -->
 
         <h4 class="text-primary mt-4">Responses</h4>
 
         <div data-selector="<%= "#{@module_name}-#{@action.name}-try-api-ui-result" %>" class="collapse">
-
-          <h5>Curl</h5>
-          <div class="card card-body bg-dark rounded p-0">
-            <pre data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" class="text-white m-2"></pre>
+          <div class="mb-3">
+            <h5 class="">Curl</h5>
+            <div class="tile tile-muted p-1">
+              <pre data-selector="<%= "#{@module_name}-#{@action.name}-curl" %>" class="m-2"></pre>
+            </div>
           </div>
 
-          <h5>Request URL</h5>
-          <div class="card card-body bg-dark rounded p-0">
-            <pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="text-white m-2"></pre>
+          <div class="mb-3">
+            <h5>Request URL</h5>
+            <div class="tile tile-muted p-1">
+              <pre data-selector="<%= "#{@module_name}-#{@action.name}-request-url" %>" class="m-2"></pre>
+            </div>
           </div>
-
-          <h5>Server Response</h5>
-
-          <div class="table-responsive">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th scope="col">Code</th>
-                  <th scope="col">Details</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>">
-                  </td>
-                  <td>
-                    <h5 class="">Response Body</h5>
-                    <div class="card card-body bg-dark rounded p-0 card-server-response-body">
-                      <pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="text-white m-2"></pre>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+          <div class="mb-3">
+            <h5>Server Response</h5>
+            <div>
+              <dl class="row">
+                <dt class="col-sm-4 col-md-2">Code</dt>
+                <dt class="col-sm-8 col-md-10">Details</dt>
+              </dl>
+              <dl class="row">
+                <dd class="col-sm-4 col-md-2" data-selector="<%= "#{@module_name}-#{@action.name}-server-response-code" %>">
+                </dd>
+                <dd class="col-sm-8 col-md-10">
+                  <h5 class="">Response Body</h5>
+                  <div class="tile-muted card-server-response-body">
+                    <pre data-selector="<%= "#{@module_name}-#{@action.name}-server-response-body" %>" class="m-2"></pre>
+                  </div>
+                </dd>
+              </dl>
+            </div>
           </div>
 
           <h5>Responses</h5>
 
         </div> <!-- /*-try-api-ui-result -->
 
-        <div class="table-responsive">
-          <table class="table">
-            <thead>
-              <tr>
-                <th scope="col">Code</th>
-                <th scope="col">Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <%= for {response, index} <- Enum.with_index(@action.responses) do %>
-              <tr>
-                <td>
-                  <%= response.code %>
-                </td>
-                <td>
-                  <div class="card card-body bg-dark rounded p-0">
-                    <pre class="text-white m-2"><em><%= response.description %></em></pre>
-                  </div>
-
-                  <ul class="nav nav-pills mb-3" role="tablist">
+        <div>
+          <dl class="row">
+            <dt class="col-sm-4 col-md-4">Code</dt>
+            <dt class="col-sm-8 col-md-8">Description</dt>
+          </dl>
+            <%= for {response, index} <- Enum.with_index(@action.responses) do %>
+            <dl class="row">
+              <dd class="col-sm-4 col-md-2">
+                <%= response.code %>
+              </dd>
+              <dd class="col-sm-8 col-md-10">
+                <div class="">
+                  <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">
+                       Example Value
+                    </a>
+                  </li>
+
+                  <%= if index == 0 do %>
                     <li class="nav-item">
-                      <a class="nav-link active"
-                         id="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
+                      <a class="nav-link api-doc-tab"
+                         id="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
                          data-toggle="pill"
-                         href="#<%= "#{@module_name}-#{@action.name}-example-value" %>"
+                         href="#<%= "#{@module_name}-#{@action.name}-model" %>"
                          role="tab"
-                         aria-controls="<%= "#{@module_name}-#{@action.name}-example-value" %>"
-                         aria-selected="true">
-                         Example Value
+                         aria-controls="<%= "#{@module_name}-#{@action.name}-model" %>"
+                         aria-selected="false">
+                         Model
                       </a>
                     </li>
-
-                    <%= if index == 0 do %>
-                      <li class="nav-item">
-                        <a class="nav-link"
-                           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">
-                           Model
-                        </a>
-                      </li>
-                    <% end %>
-                  </ul>
-                  <div class="tab-content">
-                    <div class="tab-pane fade show active"
-                         id="<%= "#{@module_name}-#{@action.name}-example-value" %>"
+                  <% 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-muted">
+                         <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}-example-value-tab" %>">
-                         <div class="card card-body bg-dark rounded p-0">
-                           <pre class="text-white m-2" data-json='<%= response.example_value %>'></pre>
-                         </div>
+                         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 %>
 
-                    <%= 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 -->
-
-                </td>
-              </tr>
-            <% end %>
-            </tbody>
-          </table>
         </div>
 
       </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_model_table.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_model_table.html.eex
index 8ec76907df..5b8ea45185 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_model_table.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_model_table.html.eex
@@ -1,70 +1,56 @@
-<div class="card card-body bg-light rounded p-0">
-  <div class="m-2">
+<div class="tile-muted p-3">
     <h3><strong><%= @model.name %></strong> {</h3>
-    <div class="table-responsive">
-      <table class="table table-borderless table-sm bg-light">
-        <tbody>
-          <%= for {key, details} <- @model.fields do %>
-            <tr>
-              <th scope="row">
-                <%= key %>
-              </th>
-              <td>
-                <span class="row text-primary">
-                  <%= details.type %>
-                  <%= if details[:definition] do %>
-                    <i class="fas fa-info-circle ml-2"
-                       data-toggle="tooltip"
-                       data-placement="right"
-                       data-html="true"
-                       title="<%= model_type_definition(details.definition) %>"></i>
-                  <% end %>
-                </span>
-                <%= if details[:type] == "array" do %>
-                  <span class="row">
-                    [<strong><%= details.array_type.name %></strong>]
-                  </span>
-                <% end %>
-                <%= if details[:enum] do %>
-                  <span class="row">enum: <%= details.enum %></span>
+      <%= for {key, details} <- @model.fields do %>
+        <dl class="row">
+          <dt class="col-md-2">
+            <%= key %>
+          </dt>
+          <dd class="col-md-10">
+            <span>
+              <%= details.type %>
+              <%= if details[:definition] do %>
+                <i class="fas fa-info-circle ml-2"
+                   data-toggle="tooltip"
+                   data-placement="right"
+                   data-html="true"
+                   title="<%= model_type_definition(details.definition) %>"></i>
+              <% end %>
+            </span>
+            <%= if details[:type] == "array" do %>
+              <span>
+                [<strong><%= details.array_type.name %></strong>]
+              </span>
+            <% end %>
+            <%= if details[:enum] do %>
+              <span>enum: <%= details.enum %></span>
+              <dl class="row">
+                <dt class="col-md-2"> <strong>enum</strong></th>
+                <dt class="col-md-10"><strong>interpretation</strong></th>
+              </dl>
+              <%= for {enum, interpretation} <- details[:enum_interpretation] do %>
+                <dl class="row">
+                  <dd class="col-md-2">
+                    "<%= enum %>"
+                  </dd>
+                  <dd class="col-md-10">
+                    <%= interpretation %>
+                  </dd>
+                </dl>
+              <% end %>
 
-                  <table class="table table-bordered bg-light">
-                    <thead>
-                      <tr>
-                        <th scope="col">enum</th>
-                        <th scope="col">interpretation</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <%= for {enum, interpretation} <- details[:enum_interpretation] do %>
-                        <tr>
-                          <td scope="row">
-                            "<%= enum %>"
-                          </td>
-                          <td>
-                            <%= interpretation %>
-                          </td>
-                        </tr>
-                      <% end %>
-                    </tbody>
-                  </table>
-                <% end %>
-                <%= if details[:example] do %>
-                  <span class="row">example: <%= details.example %></span>
-                <% end %>
-                <%= if details[:description] do %>
-                  <span class="row">description: <%= details.description %></span>
-                <% end %>
-              </td>
-              <td></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
+            <% end %>
+            <%= if details[:example] do %>
+              <span>example: <%= details.example %></span>
+            <% end %>
+            <%= if details[:description] do %>
+              <span>description: <%= details.description %></span>
+            <% end %>
+          </dd>
+
+        </dl>
+      <% end %>
+      <h3>}</h3>
     </div> <!-- /table-responsive -->
-    <h3>}</h3>
-  </div>
-</div>
 
 <%= if @model.fields[:result][:type] == "array" do %>
   <%= render "_model_table.html", model: @model.fields[:result].array_type %>