diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html
index c4a48fa..8a0d65d 100644
--- a/python_docs_theme/layout.html
+++ b/python_docs_theme/layout.html
@@ -1,46 +1,121 @@
 {% extends "classic/layout.html" %}
 
-{% block rootrellink %}
-    <li><img src="{{ pathto('_static/' + theme_root_icon, 1) }}" alt=""
-             style="vertical-align: middle; margin-top: -1px"/></li>
-    <li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
-    {% if theme_root_include_title %}
-    <a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
-    {% endif %}
-{% endblock %}
+{%- macro relbar() %}
+{# modified from sphinx/themes/basic/layout.html #}
+    <div class="related" role="navigation" aria-label="related navigation">
+      <h3>{{ _('Navigation') }}</h3>
+      <ul>
+          {%- for rellink in rellinks %}
+          <li class="right" {% if loop.first %}style="margin-right: 10px"{% endif %}>
+              <a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
+                 {{ accesskey(rellink[2]) }}>{{ rellink[3] }}
+              </a>
+              {%- if not loop.first %}{{ reldelim2 }}{% endif %}
+          </li>
+          {%- endfor %}
+          {%- block rootrellink %}
+          <li><img src="{{ pathto('_static/py.svg', 1) }}" alt="python logo" style="vertical-align: middle; margin-top: -1px"/></li>
+          <li><a href="{{theme_root_url}}">{{theme_root_name}}</a>{{ reldelim1 }}</li>
+          <li class="switchers">
+            <div class="language_switcher_placeholder"></div>
+            <div class="version_switcher_placeholder"></div>
+          </li>
+          <li>
+              {% if theme_root_include_title %}
+              <a href="{{ pathto('index') }}">{{ shorttitle }}</a>{{ reldelim1 }}
+              {% endif %}
+          </li>
+          {%- endblock %}
+            {%- for parent in parents %}
+                <li class="nav-item nav-item-{{ loop.index }}"><a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a>{{ reldelim1 }}</li>
+                {%- endfor %}
+                <li class="nav-item nav-item-this"><a href="{{ link|e }}">{{ title }}</a></li>
+            {% block relbaritems %}
+            {%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
+                <li class="right">
+                    {{ searchbox() }}
+                    {{ reldelim2 }}
+                </li>
+            {%- endif %}
+            {% endblock %}
+      </ul>
+    </div>
+{%- endmacro %}
 
 {%- macro searchbox() %}
 {# modified from sphinx/themes/basic/searchbox.html #}
     {%- if builder != "htmlhelp" %}
-    <div class="inline-search" style="display: none" role="search">
+    <div class="inline-search" role="search">
         <form class="inline-search" action="{{ pathto('search') }}" method="get">
-          <input placeholder="{{ _('Quick search') }}" type="text" name="q" />
+          <input placeholder="{{ _('Quick search') }}" aria-label="{{ _('Quick search') }}" type="text" name="q" />
           <input type="submit" value="{{ _('Go') }}" />
           <input type="hidden" name="check_keywords" value="yes" />
           <input type="hidden" name="area" value="default" />
         </form>
     </div>
-    <script type="text/javascript">$('.inline-search').show(0);</script>
     {%- endif %}
 {%- endmacro %}
 
 {% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
 {% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
-{% block relbaritems %}
-    {%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %}
-    <li class="right">
-        {{ searchbox() }}
-        {{ reldelim2 }}
-    </li>
-    {%- endif %}
-{% endblock %}
 
-{% block extrahead %}
+
+{%- block extrahead -%}
     <link rel="shortcut icon" type="image/png" href="{{ pathto('_static/' + theme_root_icon, 1) }}" />
-    {% if builder != "htmlhelp" %}
-    {% if not embedded %}<script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>{% endif %}
-    {% endif %}
+    {%- if builder != "htmlhelp" %}
+        {%- if not embedded %}
+            <script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
+            <script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
+        {%- endif -%}
+    {%- endif -%}
+    {{ super() }}
+{%- endblock -%}
+
+{%- block css -%}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {{ super() }}
+{%- endblock -%}
+
+{%- block body_tag %}
+{{ super() }}
+<div class="mobile-nav">
+    <input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"
+           aria-pressed="false" aria-expanded="false" role="button" aria-label="{{ _('Menu')}}" />
+    <label for="menuToggler" class="toggler__label">
+        <span></span>
+    </label>
+    <nav class="nav-content" role="navigation">
+         <a href="{{ theme_root_url }}" class="nav-logo">
+             <img src="{{ pathto('_static/py.svg', 1) }}" alt="Logo"/>
+         </a>
+        <div class="version_switcher_placeholder"></div>
+        {%- if pagename != "search" and builder != "singlehtml" %}
+        <form id="searchbox" role="search" class="search" action="{{ pathto('search') }}" method="get">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
+                <path fill-rule="nonzero"
+                        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 001.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 00-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 005.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#444"></path>
+            </svg>
+            <input type="text" name="q" aria-label="{{ _('Quick search') }}"/>
+            <input type="submit" value="{{ _('Go') }}"/>
+        </form>
+        {%- endif %}
+    </nav>
+    <div class="menu-wrapper">
+        <nav class="menu" role="navigation" aria-label="main navigation">
+            <div class="language_switcher_placeholder"></div>
+            {%- if logo %}
+            <p class="logo">
+                <a href="{{ pathto('index') }}">
+                <img class="logo" src="{{ pathto('_static/' + logo, 1)|e }}" alt="Logo"/>
+                </a>
+            </p>
+            {%- endif %}
+            {%- for sidebartemplate in sidebars %}
+            {%- include sidebartemplate %}
+            {%- endfor %}
+        </nav>
+    </div>
+</div>
 {% endblock %}
 
 {% block footer %}
diff --git a/python_docs_theme/static/caret-down.svg b/python_docs_theme/static/caret-down.svg
new file mode 100644
index 0000000..fc55b34
--- /dev/null
+++ b/python_docs_theme/static/caret-down.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M7.45896 11.25H22.5351c1.043 0 1.5645 1.2598.8262 1.998l-7.5352 7.5411c-.457.457-1.2011.457-1.6582 0L6.63279 13.248c-.73828-.7382-.2168-1.998.82617-1.998z" fill="#444"/></svg>
diff --git a/python_docs_theme/static/menu.js b/python_docs_theme/static/menu.js
new file mode 100644
index 0000000..b2eabb3
--- /dev/null
+++ b/python_docs_theme/static/menu.js
@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+    // Make tables responsive by wrapping them in a div and making them scrollable
+    const tables = document.querySelectorAll('table.docutils');
+    tables.forEach(function(table){
+        table.outerHTML = '<div class="responsive-table__container">' + table.outerHTML + '</div>'
+    });
+
+    const togglerInput = document.querySelector('.toggler__input');
+    const togglerLabel = document.querySelector('.toggler__label');
+    const sideMenu = document.querySelector('.menu-wrapper');
+    const menuItems = document.querySelectorAll('.menu')
+    const doc = document.querySelector('.document');
+    const body = document.querySelector('body');
+
+    function closeMenu() {
+        togglerInput.checked = false;
+        sideMenu.setAttribute("aria-expanded", 'false');
+        sideMenu.setAttribute('aria-hidden', 'true');
+        togglerLabel.setAttribute('aria-pressed', 'false');
+        body.style.overflow = 'visible';
+    }
+    function openMenu() {
+        togglerInput.checked = true;
+        sideMenu.setAttribute("aria-expanded", 'true');
+        sideMenu.setAttribute('aria-hidden', 'false');
+        togglerLabel.setAttribute('aria-pressed', 'true');
+        body.style.overflow = 'hidden';
+    }
+
+    // Close menu when link on the sideMenu is clicked
+    sideMenu.addEventListener('click', function (event) {
+        let target = event.target;
+        if (target.tagName.toLowerCase() !== 'a') return;
+        closeMenu();
+    })
+    // Add accessibility data when sideMenu is opened/closed
+    togglerInput.addEventListener('change', function (e) {
+        togglerInput.checked ? openMenu() : closeMenu();
+    });
+    // Make sideMenu links tabbable only when visible
+    for(let menuItem of menuItems) {
+        if(togglerInput.checked) {
+          menuItem.setAttribute('tabindex', '0');
+        } else {
+          menuItem.setAttribute('tabindex', '-1');
+        }
+    }
+    // Close sideMenu when document body is clicked
+    doc.addEventListener('click', function () {
+        if (togglerInput.checked) {
+            closeMenu();
+        }
+    })
+})
\ No newline at end of file
diff --git a/python_docs_theme/static/py.svg b/python_docs_theme/static/py.svg
new file mode 100644
index 0000000..90b6c90
--- /dev/null
+++ b/python_docs_theme/static/py.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.90472 0.00013087C7.24498 0.00316295 6.61493 0.0588153 6.06056 0.15584C4.42744 0.441207 4.13093 1.0385 4.13093 2.14002V3.59479H7.99018V4.07971H4.13093H2.68259C1.56098 4.07971 0.578874 4.7465 0.271682 6.01495C-0.0826595 7.4689 -0.0983765 8.37618 0.271682 9.89434C0.546011 11.0244 1.20115 11.8296 2.32275 11.8296H3.64965V10.0856C3.64965 8.82574 4.75178 7.71441 6.06056 7.71441H9.91531C10.9883 7.71441 11.8449 6.84056 11.8449 5.77472V2.14002C11.8449 1.10556 10.9626 0.328486 9.91531 0.15584C9.25235 0.046687 8.56447 -0.00290121 7.90472 0.00013087ZM5.81767 1.17017C6.2163 1.17017 6.54184 1.49742 6.54184 1.89978C6.54184 2.30072 6.2163 2.62494 5.81767 2.62494C5.41761 2.62494 5.0935 2.30072 5.0935 1.89978C5.0935 1.49742 5.41761 1.17017 5.81767 1.17017Z" fill="url(#paint0_linear)"/>
+<path d="M12.3262 4.07971V5.77472C12.3262 7.08883 11.1998 8.19488 9.9153 8.19488H6.06055C5.00466 8.19488 4.13092 9.0887 4.13092 10.1346V13.7693C4.13092 14.8037 5.04038 15.4122 6.06055 15.709C7.28217 16.0642 8.45364 16.1285 9.9153 15.709C10.8869 15.4307 11.8449 14.8708 11.8449 13.7693V12.3145H7.99017V11.8296H11.8449H13.7746C14.8962 11.8296 15.3141 11.0558 15.7042 9.89434C16.1071 8.69865 16.09 7.5488 15.7042 6.01495C15.427 4.91058 14.8976 4.07971 13.7746 4.07971H12.3262ZM10.1582 13.2843C10.5583 13.2843 10.8824 13.6086 10.8824 14.0095C10.8824 14.4119 10.5583 14.7391 10.1582 14.7391C9.75955 14.7391 9.43402 14.4119 9.43402 14.0095C9.43402 13.6086 9.75955 13.2843 10.1582 13.2843Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="1.25961e-08" y1="1.08223e-08" x2="8.81664" y2="7.59597" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5A9FD4"/>
+<stop offset="1" stop-color="#306998"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="10.0654" y1="13.8872" x2="6.91912" y2="9.42957" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD43B"/>
+<stop offset="1" stop-color="#FFE873"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
index 33f74d7..be98ed3 100644
--- a/python_docs_theme/static/pydoctheme.css
+++ b/python_docs_theme/static/pydoctheme.css
@@ -6,10 +6,15 @@ body {
     margin-right: 1em;
 }
 
+.mobile-nav,
+.menu-wrapper {
+    display: none;
+}
+
 div.related {
     margin-bottom: 1.2em;
     padding: 0.5em 0;
-    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
     margin-top: 0.5em;
 }
 
@@ -17,9 +22,23 @@ div.related a:hover {
     color: #0095C4;
 }
 
-div.related:first-child {
-    border-top: 0;
-    border-bottom: 1px solid #ccc;
+div.related ~ div.related {
+    border-top: 1px solid #ccc;
+    border-bottom: none;
+}
+
+.related .switchers {
+    display: inline-flex;
+}
+
+.switchers > div {
+    margin-right: 5px;
+}
+
+.version_switcher_placeholder,
+.language_switcher_placeholder {
+    padding-left: 5px;
+    background-color: white;
 }
 
 .inline-search {
@@ -191,3 +210,281 @@ div.footer a:hover {
 dl > dt span ~ em {
     font-family: monospace, sans-serif;
 }
+
+.toctree-wrapper ul {
+    padding-left: 20px;
+}
+
+@media (max-width: 1023px) {
+    /* Body layout */
+    div.body {
+        min-width: 100%;
+        padding: 0;
+        font-size: 0.875rem;
+    }
+    div.bodywrapper {
+        margin: 0;
+    }
+    /* Typography */
+    div.body h1 {
+        font-size: 1.625rem;
+    }
+    div.body h2 {
+        font-size: 1.25rem;
+    }
+    div.body h3, div.body h4, div.body h5 {
+        font-size: 1rem;
+    }
+    /* Remove sidebar and top related bar */
+    div.related, .sphinxsidebar {
+        display: none;
+    }
+    /* Anchorlinks are not hidden by fixed-positioned navbar when scrolled to */
+    html {
+        scroll-padding-top: 40px;
+    }
+
+    /* Top navigation bar */
+    .mobile-nav {
+        display: block;
+        height: 40px;
+        width: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: white;
+        box-shadow: rgba(0, 0, 0, 0.25) 0 0 2px 0;
+        z-index: 1;
+    }
+    .mobile-nav * {
+        box-sizing: border-box;
+    }
+    .nav-content {
+        position: absolute;
+        z-index: 2;
+        left: 0;
+        top: 0;
+        height: 40px;
+        width: 100%;
+        padding: 0 1rem 0 45px;
+        display: flex;
+        align-items: center;
+        background-color: white;
+    }
+    .nav-logo {
+        margin-right: 0.7rem;
+        display: flex;
+        flex: 0 0 auto;
+    }
+    .nav-content img {
+        width: 20px;
+        height: auto;
+    }
+    .version_switcher_placeholder {
+        flex: 0 1 0;
+        margin-right: 1rem;
+    }
+    .version_switcher_placeholder select {
+        height: 30px;
+        border-radius: 0;
+    }
+    .nav-content .search {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        padding: 0 0 0 2px;
+        border: 1px solid #a9a9a9;
+        height: 30px;
+        overflow: hidden;
+    }
+    .nav-content .search:hover {
+        box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
+        border-color: rgba(223,225,229,0);
+    }
+    .nav-content .search input[type=text] {
+        border: 0;
+        outline: 0;
+        box-shadow: none;
+        width: 40px;
+        height: 28px;
+        flex: 1 1 auto;
+    }
+    .nav-content .search input[type=submit] {
+        height: 100%;
+        border: 0;
+        box-shadow: none;
+        outline: 1px solid #999;
+        cursor: pointer;
+    }
+    .nav-content .search svg {
+        flex: 0 0 20px;
+        fill: #333;
+    }
+    .toggler__input {
+        width: 40px;
+        height: 40px;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        z-index: 3;
+        margin: 0;
+    }
+    .toggler__label {
+        width: 40px;
+        height: 40px;
+        margin: 0;
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        background-color: transparent;
+        border: 1px solid white;
+        box-shadow: none;
+        z-index: 3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 8px;
+    }
+    .toggler__label:focus {
+        background-color: #eee;
+        border: 1px solid #ededed;
+        box-shadow: rgba(0, 0, 0, 0.25) 1px 0 2px 0;
+    }
+    .toggler__label:hover {
+        background-color: #eee;
+        border: 1px solid #ededed;
+        box-shadow: rgba(0, 0, 0, 0.25) 1px 0 2px 0;
+    }
+    .toggler__label > span {
+        position: relative;
+        flex: none;
+        height: 2px;
+        width: 100%;
+        background: #444;
+        transition: all 400ms ease;
+    }
+    .toggler__label > span::before,
+    .toggler__label > span::after {
+        content: '';
+        height: 2px;
+        width: 100%;
+        background: inherit;
+        position: absolute;
+        left: 0;
+        top: -8px;
+    }
+    .toggler__label > span::after {
+        top: 8px;
+    }
+    .toggler__input:checked ~ .toggler__label span {
+        transform: rotate(135deg);
+    }
+    .toggler__input:checked ~ .toggler__label span::before {
+        transform: rotate(90deg);
+    }
+    .toggler__input:checked ~ .toggler__label span::before,
+    .toggler__input:checked ~ .toggler__label span::after {
+        top: 0;
+    }
+    .toggler__input:checked:hover ~ .toggler__label span {
+        transform: rotate(315deg);
+    }
+    .toggler__input:checked ~ .menu-wrapper {
+        visibility: visible;
+        left: 0;
+    }
+
+    /* Sliding side menu */
+    .menu-wrapper {
+        display: block;
+        position: fixed;
+        top: 0;
+        transition: left 400ms ease;
+        left: -310px;
+        width: 300px;
+        height: 100%;
+        background-color: #eee;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        overflow-y: auto;
+    }
+    .menu-wrapper.open {
+        visibility: visible;
+        left: 0;
+    }
+    .menu {
+        padding: 40px 10px 30px 20px;
+    }
+    .menu-wrapper h3,
+    .menu-wrapper h4 {
+        margin-bottom: 0;
+        font-weight: normal;
+    }
+    .menu-wrapper h4 {
+        font-size: 1.3em;
+    }
+    .menu-wrapper h3 {
+        color: #444444;
+        font-size: 1.4em;
+    }
+    .menu-wrapper h3 + p,
+    .menu-wrapper h4 + p {
+        margin-top: 0.5rem;
+    }
+    .menu a {
+        font-size: smaller;
+        color: #444444;
+        text-decoration: none;
+    }
+    .menu ul {
+        list-style: none;
+        line-height: 1.4;
+        overflow-wrap: break-word;
+        padding-left: 0;
+    }
+    .menu ul ul {
+        margin-left: 20px;
+        list-style: square;
+    }
+    .menu ul li {
+        margin-bottom: 0.5rem;
+    }
+    .language_switcher_placeholder,
+    .version_switcher_placeholder {
+        position: relative;
+        border: 1px solid #a8a8a8;
+        height: 30px;
+    }
+    .language_switcher_placeholder {
+        margin-top: 2rem;
+    }
+    .language_switcher_placeholder::after,
+    .version_switcher_placeholder::after {
+        content: url('../_static/caret-down.svg');
+        position: absolute;
+        top: 7px;
+        width: 15px;
+        height: 15px;
+        right: 3px;
+        pointer-events: none;
+    }
+    .language_switcher_placeholder select,
+    .version_switcher_placeholder select {
+        appearance: none;
+        border: 0;
+        height: 100%;
+    }
+    .language_switcher_placeholder select {
+        width: 100%;
+    }
+    .document {
+        padding-top: 40px;
+        position: relative;
+        z-index: 0;
+    }
+    /*Responsive tables*/
+    .responsive-table__container {
+        width: 100%;
+        overflow-x: auto;
+    }
+}
diff --git a/python_docs_theme/theme.conf b/python_docs_theme/theme.conf
index ac8f097..74cc9e9 100644
--- a/python_docs_theme/theme.conf
+++ b/python_docs_theme/theme.conf
@@ -27,5 +27,5 @@ codetextcolor = #333333
 issues_url = 
 root_name = Python
 root_url = https://www.python.org/
-root_icon = py.png
+root_icon = py.svg
 root_include_title = True