diff --git a/_static/custom.css b/_static/custom.css
index 4af205fd..32a50317 100644
--- a/_static/custom.css
+++ b/_static/custom.css
@@ -449,3 +449,24 @@ main > div .flex.justify-between.items-center.pt-6 {
 .offline-docs .urls a:first-child {
   padding-left: 0px !important;
 }
+
+/* navigation */
+.navigation-dropdown {
+  border-radius: 0.75rem;
+  margin-left: -48%;
+  margin-top: 5px;
+  transition-duration: 0.4s;
+  transition-property: opacity;
+  color: var(--background-color);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border: 1px solid hsl(var(--border));
+}
+.navigation-dropdown a {
+  padding: .375rem 1rem;
+  white-space: nowrap;
+  width: 100%;
+}
+#left-sidebar nav.md\:hidden {
+  margin-top: 1rem !important;
+}
diff --git a/_static/docs-og.png b/_static/docs-og.png
new file mode 100644
index 00000000..43ed9788
Binary files /dev/null and b/_static/docs-og.png differ
diff --git a/_templates/header.html b/_templates/header.html
new file mode 100644
index 00000000..64c06b59
--- /dev/null
+++ b/_templates/header.html
@@ -0,0 +1,47 @@
+{% extends "!header.html" %}
+
+{%- block header_main_nav %}
+{%- if main_nav_links|tobool -%}
+<nav class="flex items-center space-x-6 text-sm font-medium">
+    {%- for text, item in main_nav_links.items() %}
+    {%- if item is string %}
+    {# Single link #}
+    {%- set _active = "text-foreground" if pagename in item else "text-foreground/60" -%}
+    {%- set url = item if item.startswith("http") else item %}
+    <a href="{{ url }}" class="py-2 transition-colors hover:text-foreground/80 {{ _active }}"
+        rel="{{ 'nofollow noopener' if url.startswith('http') else '' }}">{{ text }}</a>
+    {%- elif item is mapping %}
+    {# Nested links with focus and hover accessibility #}
+    <div x-data="{ open: false }" @focusin="open = true" @focusout="open = false" @mouseenter="open = true"
+        @mouseleave="open = false" class="relative navigation-link">
+        <a href="#" class="py-2 transition-colors hover:text-foreground/80 focus:outline-none" tabindex="0"
+            aria-haspopup="true" :aria-expanded="open.toString()">
+            {{ text }}
+            <svg fill="currentColor" height="24px" stroke="none" viewBox="0 0 24 24" width="24px"
+                xmlns="http://www.w3.org/2000/svg" class="rotate-90 inline">
+                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
+            </svg>
+        </a>
+        <div x-show="open"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="transition"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0"
+            class="absolute bg-background mt-2 z-10 transition navigation-dropdown"
+            style="display: none;">
+            {%- for subtext, suburl in item.items() %}
+            {%- set _active = "text-foreground" if pagename in suburl else "text-foreground/60" -%}
+            {%- set url = suburl if suburl.startswith("http") else suburl %}
+            <a href="{{ url }}" class="block px-4 py-2 text-sm transition-colors {{ _active }}" tabindex="0"
+                rel="{{ 'nofollow noopener' if suburl.startswith('http') else '' }}">
+                {{ subtext }}
+            </a>
+            {%- endfor %}
+        </div>
+    </div>
+    {%- endif %}
+    {%- endfor %}
+</nav>
+{%- endif %}
+{%- endblock header_main_nav %}
diff --git a/_templates/layout.html b/_templates/layout.html
index b2fe41ee..71d4c59b 100644
--- a/_templates/layout.html
+++ b/_templates/layout.html
@@ -2,6 +2,9 @@
 
 {% block linktags %}
 {{ super() }}
+<meta property="og:image" content="{{ html_baseurl }}{{ docs_root }}/{{ current_ow_version }}/_static/docs-og.png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="480" />
 <link rel="canonical" href="{{ html_baseurl }}{{ docs_root }}/{{ current_ow_version }}/{{ pagename }}.html" />
 {% endblock %}
 
diff --git a/_templates/sidebar_main_nav_links.html b/_templates/sidebar_main_nav_links.html
new file mode 100644
index 00000000..1d42d185
--- /dev/null
+++ b/_templates/sidebar_main_nav_links.html
@@ -0,0 +1,38 @@
+{#- Template for the main navigation links in the sidebar -#}
+{% if main_nav_links|tobool %}
+<nav class="flex flex-col font-bold md:hidden">
+    {%- for text, item in main_nav_links.items() %}
+    {%- if item is string %}
+    {# Single link #}
+    {%- set url = item if item.startswith("http") else pathto(item) %}
+    <a href="{{ url }}" class="block px-4 py-2 transition-colors hover:bg-gray-100 text-gray-800"
+        rel="{{ 'nofollow noopener' if item.startswith('http') else '' }}">
+        {{ text }}
+    </a>
+    {%- elif item is mapping %}
+    {# Nested links #}
+    <div x-data="{ open: false }" class="flex flex-col">
+        <a @click="open = !open" @focus="open = true" @blur="open = false"
+            class="flex items-center justify-between px-4 py-2 transition-colors hover:bg-gray-100 text-gray-800 w-full focus:outline-none"
+            :aria-expanded="open.toString()" aria-haspopup="true">
+            {{ text }}
+            <svg fill="currentColor" height="24px" stroke="none" viewBox="0 0 24 24" width="24px"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
+            </svg>
+        </a>
+        <div x-show="open" x-transition class="flex flex-col pl-6 mt-2 space-y-1">
+            {%- for subtext, suburl in item.items() %}
+            {%- set sublink = suburl if suburl.startswith("http") else pathto(suburl) %}
+            <a href="{{ sublink }}"
+                class="block ml-2 px-4 py-2 text-sm transition-colors hover:bg-gray-100 text-gray-700"
+                rel="{{ 'nofollow noopener' if suburl.startswith('http') else '' }}">
+                {{ subtext }}
+            </a>
+            {%- endfor %}
+        </div>
+    </div>
+    {%- endif %}
+    {%- endfor %}
+</nav>
+{% endif %}
diff --git a/_templates/sidebar_toc.html b/_templates/sidebar_toc.html
index b5d82fb4..9713bc5f 100644
--- a/_templates/sidebar_toc.html
+++ b/_templates/sidebar_toc.html
@@ -1,4 +1,4 @@
-<nav class="table w-full min-w-full my-6 lg:my-8">
+<nav class="table w-full min-w-full my-6 lg:my-8 mt-4">
   {%- if theme_globaltoc_includehidden|tobool %}
   {{ toctree(maxdepth=4, titles_only=true, collapse=True, includehidden=true) }}
   {%- else %}
diff --git a/_templates/version_switcher.html b/_templates/version_switcher.html
index 1263076c..6719bc66 100644
--- a/_templates/version_switcher.html
+++ b/_templates/version_switcher.html
@@ -1,16 +1,20 @@
 <div class="doc-versions">
     <label>Version</label>
-    <div class="dropdown" x-data="{ showVersionSwitcher: false }">
-        <button type="button" class="dropbtn {% if not ow_versions|length > 1 %} disabled {% endif %}"
-            {% if ow_versions|length > 1 %} @click="showVersionSwitcher = !showVersionSwitcher" :class="{'active': showVersionSwitcher}
-            {% endif %}
-            ">{{ current_ow_version }}{% if ow_versions|length > 1 %}<svg fill="currentColor" height="18px"
-                stroke="none" viewBox="0 0 24 24" width="18px" xmlns="http://www.w3.org/2000/svg">
+    <div class="dropdown" x-data="{ showVersionSwitcher: false, buttonWidth: 0 }"
+        x-init="buttonWidth = $refs.button.offsetWidth">
+        <button type="button" x-ref="button" class="dropbtn {% if not ow_versions|length > 1 %} disabled {% endif %}"
+            {% if ow_versions|length > 1 %} @click="showVersionSwitcher = !showVersionSwitcher"
+            :class="{'active': showVersionSwitcher}" {% endif %}>
+            {{ current_ow_version }}
+            {% if ow_versions|length > 1 %}
+            <svg fill="currentColor" height="18px" stroke="none" viewBox="0 0 24 24" width="18px"
+                xmlns="http://www.w3.org/2000/svg">
                 <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
-            </svg>{% endif %}
+            </svg>
+            {% endif %}
         </button>
         <div x-show="showVersionSwitcher" class="dropdown-content" :class="{'hidden': !showVersionSwitcher}"
-            @click.away="showVersionSwitcher = false" class="dropdown-content">
+            @click.away="showVersionSwitcher = false" style="display: none;" :style="{ width: buttonWidth + 'px' }">
             {% for ow_version in ow_versions %}
             {% if ow_version != current_ow_version %}
             <a href="{{ docs_root }}/{{ ow_version }}/{{ pagename }}.html">{{ ow_version }}</a>
diff --git a/conf.py b/conf.py
index 744d6ad4..b19eec7a 100644
--- a/conf.py
+++ b/conf.py
@@ -136,12 +136,6 @@
 # documentation.
 
 html_theme_options = {
-    'main_nav_links': {
-        'About': 'https://openwisp.org/',
-        'FAQ': 'https://openwisp.org/faq/',
-        'Support': 'https://openwisp.org/support/',
-        'Blog': 'https://openwisp.org/blog/',
-    },
     'show_prev_next': True,
     'show_scrolltop': True,
     'show_breadcrumbs': True,
@@ -157,7 +151,14 @@
 
 # Custom sidebar templates, maps document names to template names.
 #
-html_sidebars = {'**': ['version_switcher.html', 'sidebar_toc.html', 'downloads.html']}
+html_sidebars = {
+    '**': [
+        'version_switcher.html',
+        'sidebar_main_nav_links.html',
+        'sidebar_toc.html',
+        'downloads.html',
+    ]
+}
 
 # Add any paths that contain custom themes here, relative to this directory.
 # html_theme_path = ['_theme']
@@ -470,6 +471,22 @@
     'docs_root': docs_root,
     'stable_version': os.environ.get('STABLE_VERSION'),
     'html_baseurl': os.environ.get('HTML_BASE_URL', ''),
+    'main_nav_links': {
+        'Features': 'https://openwisp.org/features/',
+        'About': {
+            'FAQ': 'https://openwisp.org/faq/',
+            'Source Code': 'https://openwisp.org/code/',
+            'History': 'https://openwisp.org/history/',
+            'Team': 'https://openwisp.org/team/',
+            'Partners': 'https://openwisp.org/partners/',
+            'Sponsorship': 'https://openwisp.org/sponsorship/',
+        },
+        'Support': {
+            'Community Support': 'https://openwisp.org/support/',
+            'Commercial Support': 'https://openwisp.org/commercial-support/',
+        },
+        'Blog': 'https://openwisp.org/blog/',
+    },
 }
 
 for ow_version in ow_docs_config['versions']: