diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css
index 33ba15d612..ad19b1daf4 100644
--- a/rest_framework/static/rest_framework/docs/css/base.css
+++ b/rest_framework/static/rest_framework/docs/css/base.css
@@ -1,3 +1,8 @@
+.main-container {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
 .sidebar {
   overflow: auto;
   font-family: verdana;
@@ -125,6 +130,11 @@
 }
 
 @media (max-width: 767px) {
+  .main-container {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
   .sidebar {
     position: relative;
     width: 100%;
@@ -176,13 +186,29 @@ body {
   padding: 0px;
 }
 
-.coredocs-section {
+.coredocs-section-title {
     margin-top: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid lightgrey;
 }
 
-.coredocs-section:last-child {
+.coredocs-link-title a,
+.coredocs-section-title a {
+  display: none;
+}
+
+.coredocs-link-title a,
+.coredocs-section-title a {
+  text-decoration: none;
+}
+
+.coredocs-link-title:hover a,
+.coredocs-section-title:hover a {
+  display: inline;
+  font-size: 20px;
+}
+
+.coredocs-section-title:last-child {
     margin-top: 0;
 }
 
@@ -232,6 +258,18 @@ body {
 
 /* @group Docs Content */
 
+.docs-content .meta .label {
+    vertical-align: middle;
+    font-size: 14px;
+    font-weight: normal;
+}
+
+.docs-content .meta code {
+    vertical-align: middle;
+    padding: .2em .6em .3em;
+    font-size: 14px;
+}
+
 .docs-content .btn {
   font-size: inherit;
 }
@@ -239,4 +277,5 @@ body {
 .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 1824e5bfab..22af83338b 100644
--- a/rest_framework/templates/rest_framework/docs/document.html
+++ b/rest_framework/templates/rest_framework/docs/document.html
@@ -1,7 +1,9 @@
 {% load rest_framework %}
 
 {% for section_key, section in document.data.items %}
-    <h2 id="{{ section_key }}" class="coredocs-section"><i class="fa fa-angle-right"></i> {{ section_key }}</h2>
+    <h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a href="#{{ section_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+</a></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/index.html b/rest_framework/templates/rest_framework/docs/index.html
index b709b0617a..31c340543e 100644
--- a/rest_framework/templates/rest_framework/docs/index.html
+++ b/rest_framework/templates/rest_framework/docs/index.html
@@ -31,7 +31,7 @@
 
         <div class="container" id="main">
             <div class="row">
-                <div class="col-md-12">
+                <div class="col-md-12 main-container">
                     {% include "rest_framework/docs/document.html" %}
                 </div>
             </div>
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index 6de23dcaf0..0476e3f8ee 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -2,12 +2,21 @@
 <div class="row coredocs-link">
 
 <div class="col-md-6 docs-content">
-<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>
+    <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>
 
-<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>
+    <h3 id="{{ section_key }}-{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+</a></h3>
+
+    <div class="meta">
+        <span class="label label-primary">{{ link.action|upper }}</span>
+        <code>{{ link.url }}</code>
+    </div>
 
     <p>{% render_markdown link.description %}</p>
 
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index 145a91a83d..a672c581f8 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -6,7 +6,7 @@ <h3 class="brand">{{ document.title }}</h3>
         <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 }}-dropdown" class="collapsed">
-                <a href="#{{ section_key }}"><i class="fa fa-dot-circle-o fa-lg"></i> {{ section_key }} <span class="arrow"></span></a>
+                <a><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 }}-dropdown">
                 {% for link_key, link in section.links.items %}