diff --git a/docs_theme/nav.html b/docs_theme/nav.html
index 255fc46cd..decb11760 100644
--- a/docs_theme/nav.html
+++ b/docs_theme/nav.html
@@ -1,5 +1,5 @@
 <!-- New Navbar -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
   <div class="container">
     <a class="navbar-brand" href="https://www.django-rest-framework.org/">
       <span class="d-none d-md-block">Django REST framework</span>
@@ -34,7 +34,7 @@
       <a 
         {% if page.previous_page %}href="{{ page.previous_page.url|url }}"{% endif %}
         {% if not page.previous_page %}disabled{% endif %}
-        class="btn btn-sm btn-secondary d-flex align-items-center gap-1"
+        class="btn btn-sm btn-secondary align-items-center gap-1 d-none d-sm-flex"
       >
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
@@ -47,7 +47,7 @@
       <a
         {% if page.next_page %}href="{{ page.next_page.url|url }}"{% endif %}
         {% if not page.next_page %}disabled{% endif %}
-        class="btn btn-sm btn-secondary d-flex align-items-center gap-1"
+        class="btn btn-sm btn-secondary align-items-center gap-1 d-none d-sm-flex"
       >
       <span class="d-none d-md-block">Next</span>
 
@@ -58,16 +58,19 @@
 
       <!-- prettier-ignore -->
       <a
-        class="btn btn-primary btn-sm d-flex align-items-center"
+        class="btn btn-primary btn-sm align-items-center gap-1 d-none d-sm-flex"
         href="https://github.com/encode/django-rest-framework/tree/master"
         >
-        <span>Github</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+        </svg>
+        <span class="d-none d-md-block">Github</span>
         </a
       >
 
       <div class="dropdown">
         <button
-          class="btn btn-secondary dropdown-toggle d-flex align-items-center"
+          class="btn dropdown-toggle d-flex align-items-center"
           type="button"
           data-bs-toggle="dropdown"
           aria-expanded="false"
diff --git a/docs_theme/src/scss/styles.scss b/docs_theme/src/scss/styles.scss
index a0ffce944..7c446e3b6 100644
--- a/docs_theme/src/scss/styles.scss
+++ b/docs_theme/src/scss/styles.scss
@@ -3,16 +3,11 @@
 // General Styles
 $font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-size-base: 1rem * 0.875;
-$color-contrast-dark: #333;
 
 // Navbar Styles
-$navbar-padding-y: 0;
+$navbar-padding-y: 0.5rem;
 $navbar-nav-link-padding-x: 1rem;
 
-$dropdown-link-color: #a30000;
-$nav-link-color: #a30000;
-$nav-link-hover-color: #a30000;
-
 $code-color: #d14;
 
 // Configuration
@@ -64,12 +59,10 @@ $code-color: #d14;
 
 // Custom Classes
 a {
-  color: #a30000;
   text-decoration: none;
 
   &:hover,
   &:active {
-    color: #c20000;
     text-decoration: underline;
   }
 }
@@ -78,22 +71,13 @@ pre.prettyprint {
   margin-bottom: 20px;
 }
 
-body hr {
-  border-top: 1px dotted #a30000;
-}
-
-.navbar {
-  border-top: 5px solid #a30000;
-}
-
 code {
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
-  padding: 2px 4px;
+  @extend .rounded;
 }
 
 pre {
-  background-color: #f7f7f9;
+  @extend .bg-body-tertiary;
+  @extend .rounded;
 }
 
 pre code {
@@ -159,8 +143,6 @@ img {
 
 .prettyprint {
   padding: 20px;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
 }
 .prettyprint.linenums {
   box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
@@ -179,8 +161,6 @@ ol.linenums li {
 
 #table-of-contents {
   @extend .rounded;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
   padding: 0.5rem;
   margin-bottom: 1rem;
 }