diff --git a/rest_framework/schemas.py b/rest_framework/schemas.py
index 1b3df23af..844bcc5da 100644
--- a/rest_framework/schemas.py
+++ b/rest_framework/schemas.py
@@ -57,13 +57,13 @@ def field_to_schema(field):
         return coreschema.String(title=title, description=description)
     elif isinstance(field, serializers.MultipleChoiceField):
         return coreschema.Array(
-            items=coreschema.Enum(enum=list(field.choices.values())),
+            items=coreschema.Enum(enum=list(field.choices.keys())),
             title=title,
             description=description
         )
     elif isinstance(field, serializers.ChoiceField):
         return coreschema.Enum(
-            enum=list(field.choices.values()),
+            enum=list(field.choices.keys()),
             title=title,
             description=description
         )
diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css
index a63ab4719..aa9550287 100644
--- a/rest_framework/static/rest_framework/docs/css/base.css
+++ b/rest_framework/static/rest_framework/docs/css/base.css
@@ -30,30 +30,28 @@
     margin-bottom: 0;
 }
 
+.sidebar .brand a {
+    color: #FFF;
+}
+
+.sidebar .brand a:hover,
+.sidebar .brand a:active,
+.sidebar .brand a:focus {
+  text-decoration: none;
+}
+
 .sidebar .toggle-btn {
   display: none;
 }
 
 .sidebar .menu-list ul,
 .sidebar .menu-list li {
+  background: #2e353d;
   list-style: none;
   padding: 0px;
   margin: 0px;
   line-height: 35px;
   cursor: pointer;
-  /*    
-    .collapsed{
-       .arrow:before{
-                 font-family: FontAwesome;
-                 content: "\f053";
-                 display: inline-block;
-                 padding-left:10px;
-                 padding-right: 10px;
-                 vertical-align: middle;
-                 float:right;
-            }
-     }
-*/
 }
 
 .sidebar .menu-list ul :not(collapsed) .arrow:before,
@@ -97,8 +95,14 @@
   background-color: #020203;
 }
 
-.sidebar .menu-list ul .sub-menu li:before,
-.sidebar .menu-list li .sub-menu li:before {
+
+.sidebar .menu-list ul .sub-menu li a,
+.sidebar .menu-list li .sub-menu li a {
+  display: block;
+}
+
+.sidebar .menu-list ul .sub-menu li a:before,
+.sidebar .menu-list li .sub-menu li a:before {
   font-family: FontAwesome;
   content: "\f105";
   display: inline-block;
diff --git a/rest_framework/static/rest_framework/docs/img/favicon.ico b/rest_framework/static/rest_framework/docs/img/favicon.ico
index e85006a3c..17b2c5d98 100644
Binary files a/rest_framework/static/rest_framework/docs/img/favicon.ico and b/rest_framework/static/rest_framework/docs/img/favicon.ico differ
diff --git a/rest_framework/templates/rest_framework/docs/auth/basic.html b/rest_framework/templates/rest_framework/docs/auth/basic.html
new file mode 100644
index 000000000..16fc67244
--- /dev/null
+++ b/rest_framework/templates/rest_framework/docs/auth/basic.html
@@ -0,0 +1,38 @@
+{% load rest_framework %}
+
+<!-- Modal -->
+<div class="modal fade auth-modal auth-basic" id="auth_basic_modal" tabindex="-1" role="dialog" aria-labelledby="basic authentication modal">
+<div class="modal-dialog modal-md" role="document">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h3 class="modal-title"><i class="fa fa-key"></i> Basic Authentication</h3>
+    </div>
+
+    <form class="form-horizontal authentication-basic-form">
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="authorization" class="col-sm-2 control-label">Username:</label>
+
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="username" required>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="authorization" class="col-sm-2 control-label">Password:</label>
+
+        <div class="col-sm-10">
+          <input type="password" class="form-control" id="password" required>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      <button type="submit" class="btn btn-primary">Use Basic Authentication</button>
+    </div>
+    </form>
+
+  </div>
+</div>
+</div>
diff --git a/rest_framework/templates/rest_framework/docs/index.html b/rest_framework/templates/rest_framework/docs/index.html
index 7da04e424..ecd340a29 100644
--- a/rest_framework/templates/rest_framework/docs/index.html
+++ b/rest_framework/templates/rest_framework/docs/index.html
@@ -13,6 +13,9 @@
         <link href="{% static 'rest_framework/docs/css/font-awesome-4.0.3.css' %}" rel="stylesheet">
         <link href="{% static 'rest_framework/docs/css/base.css' %}" rel="stylesheet">
         <link href="{% static 'rest_framework/docs/css/jquery.json-view.min.css' %}" rel="stylesheet">
+
+        <link href="{% static 'rest_framework/docs/img/favicon.ico' %}" rel="shortcut icon">
+
         <style>{{ code_style }}</style>
         <style>
         .highlight {background-color: #f7f7f9}
@@ -40,6 +43,7 @@
         </div>
 
         {% include "rest_framework/docs/auth/token.html" %}
+        {% include "rest_framework/docs/auth/basic.html" %}
         {% include "rest_framework/docs/auth/session.html" %}
 
         <script src="{% static 'rest_framework/docs/js/jquery-1.10.2.min.js' %}"></script>
@@ -192,12 +196,19 @@
                     options.headers = {
                         'Authorization': window.auth.value
                     }
+                } else if (window.auth && window.auth.type === 'basic') {
+                    const token = window.auth.username + ':' + window.auth.password
+                    const hash = window.btoa(token)
+                    options.headers = {
+                        'Authorization': 'Basic ' + hash
+                    }
                 } else if (window.auth && window.auth.type === 'session') {
                     options.csrf = {
                         'X-CSRFToken': getCookie('csrftoken')
                     }
                 }
 
+
                 const client = new coreapi.Client(options)
 
                 client.action(doc, key, params).then(function (data) {
@@ -265,6 +276,23 @@
                 $('#auth_token_modal').modal('hide');
             });
 
+            // Authentication: basic
+            $('form.authentication-basic-form').submit(function(event) {
+                event.preventDefault();
+                const form = $(this).closest("form");
+                const username = form.find('input#username').val();
+                const password = form.find('input#password').val();
+                window.auth = {
+                    'type': 'basic',
+                    'username': username,
+                    'password': password,
+                };
+                $('#selected-authentication').text('basic');
+                $('#auth-control').children().removeClass('active');
+                $('#auth-control').find("[data-auth='basic']").addClass('active');
+                $('#auth_basic_modal').modal('hide');
+            });
+
             // Authentication: session
             $('form.authentication-session-form').submit(function(event) {
                 event.preventDefault();
diff --git a/rest_framework/templates/rest_framework/docs/sidebar.html b/rest_framework/templates/rest_framework/docs/sidebar.html
index 72711d128..feb5af4fc 100644
--- a/rest_framework/templates/rest_framework/docs/sidebar.html
+++ b/rest_framework/templates/rest_framework/docs/sidebar.html
@@ -1,5 +1,5 @@
 <div class="sidebar">
-    <h3 class="brand">{{ document.title }}</h3>
+    <h3 class="brand"><a href=".">{{ document.title }}</a></h3>
 
     <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
     <div class="menu-list">
@@ -8,7 +8,7 @@
             <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
                 <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">
+            <ul class="sub-menu collapse" 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 %}
@@ -18,12 +18,13 @@
 
         <ul class="menu-list menu-list-bottom">
             <li data-toggle="collapse" data-target="#auth-control" class="collapsed">
-                <a><i class="fa fa-user fa-lg"></i> Authentication</a> <span id="selected-authentication">none</span>
+                <a><i class="fa fa-user fa-lg"></i> Authentication</a> <span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span>
             </li>
             <ul class="sub-menu collapse out" id="auth-control">
-                <li data-auth="none" class="active"><a href="#" data-language="none">none</a></li>
+                <li data-auth="none" {% if not user.is_authenticated %}class="active"{% endif %}><a href="#" data-language="none">none</a></li>
                 <li data-auth="token" data-toggle="modal" data-target="#auth_token_modal"><a href="#">token</a></li>
-                <li data-auth="session" data-toggle="modal" data-target="#auth_session_modal"><a href="#">session</a></li>
+                <li data-auth="basic" data-toggle="modal" data-target="#auth_basic_modal"><a href="#">basic</a></li>
+                <li data-auth="session"  data-toggle="modal" data-target="#auth_session_modal" {% if user.is_authenticated %}class="active"{% endif %}><a href="#">session</a></li>
             </ul>
 
             <li data-toggle="collapse" data-target="#language-control" class="collapsed">