diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css
index d79e78e2c..50ab9a494 100644
--- a/rest_framework/static/rest_framework/docs/css/base.css
+++ b/rest_framework/static/rest_framework/docs/css/base.css
@@ -181,13 +181,12 @@ body {
 }
 
 .coredocs-section {
-    border-top: 2px solid lightgrey;
     margin-top: 20px;
-    padding-top: 20px
+    padding-bottom: 10px;
+    border-bottom: 1px solid lightgrey;
 }
 
-.coredocs-section:first-child {
-    border-top: 0;
+.coredocs-section:last-child {
     margin-top: 0;
 }
 
@@ -205,3 +204,15 @@ body {
 .sidebar .language-switcher .btn {
     padding: 3px 7px;
 }
+
+
+/* @group Docs Content */
+
+.docs-content .btn {
+  font-size: inherit;
+}
+
+.code-samples pre {
+  margin-top: 20px;
+}
+/* @end Docs Content */
diff --git a/rest_framework/templates/rest_framework/docs/document.html b/rest_framework/templates/rest_framework/docs/document.html
index 0b1f8c2ed..2cc29f095 100644
--- a/rest_framework/templates/rest_framework/docs/document.html
+++ b/rest_framework/templates/rest_framework/docs/document.html
@@ -1,7 +1,7 @@
 {% load rest_framework %}
 
 {% for section_key, section in document.data.items %}
-    <h1 id="{{ section_key }}" class="coredocs-section">{{ section_key }}</h1>
+    <h2 id="{{ section_key }}" class="coredocs-section"><i class="fa fa-angle-right"></i> {{ section_key }}</h2>
     {% for link_key, link in section.links.items %}
         {% include "rest_framework/docs/link.html" %}
     {% endfor %}
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index 4e6fac231..6de23dcaf 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -2,9 +2,9 @@
 <div class="row coredocs-link">
 
 <div class="col-md-6 docs-content">
-<button class="btn btn-success" style="float: right; margin-top: 20px" data-toggle="modal" data-target="#{{ section_key }}_{{ link_key }}_modal">Interact</button>
+<button class="btn btn-sm btn-success" style="float: right; margin-top: 20px" data-toggle="modal" data-target="#{{ section_key }}_{{ link_key }}_modal">Interact</button>
 
-<h2 id="{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</h2>
+<h3 id="{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</h3>
     <p>
         <span class="label label-primary">{{ link.action|upper }}</span> <code>{{ link.url }}</code>
     </p>
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index f1ae6ff45..145a91a83 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -5,10 +5,10 @@
     <div class="menu-list">
         <ul id="menu-content" class="menu-content collapse out">
             {% for section_key, section in document.data.items %}
-            <li data-toggle="collapse" data-target="#{{ section_key }}-{{ link_key }}" class="collapsed">
+            <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
                 <a href="#{{ section_key }}"><i class="fa fa-dot-circle-o fa-lg"></i> {{ section_key }} <span class="arrow"></span></a>
             </li>
-            <ul class="sub-menu collapse in" id="{{ section_key }}-{{ link_key }}">
+            <ul class="sub-menu collapse in" id="{{ section_key }}-dropdown">
                 {% for link_key, link in section.links.items %}
                     <li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
                 {% endfor %}