diff --git a/content/_index.md b/content/_index.md
index e5566a882..7ac9c17ed 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -5,9 +5,10 @@ title: "Apache NiFi"
 {{% hero-section img=main-hero.svg %}}
 # An **easy to use**, **powerful**, and **reliable** system to process and distribute data
 Apache NiFi provides configurable, scalable, and reliable data transformation and distribution
-
+<div class="download-links">
 <a class="uk-button uk-button-primary uk-icon" href="/download/">Download</a>
 <a class="uk-button uk-button-default uk-icon" href="/documentation/">View Documentation</a>
+</div>
 {{% /hero-section %}}
 
 {{% hero-section img=provenance.svg background=white %}}
diff --git a/layouts/shortcodes/cpp-download-links.html b/layouts/shortcodes/cpp-download-links.html
index f82dc08d9..88f1d7828 100644
--- a/layouts/shortcodes/cpp-download-links.html
+++ b/layouts/shortcodes/cpp-download-links.html
@@ -18,7 +18,7 @@
 
 {{- $downloadFilePath := (print "nifi-minifi-cpp/" $downloadVersion "/nifi-minifi-cpp-" $downloadVersion "-" $extension) -}}
 
-<div class="uk-margin-top">
+<div class="uk-margin-top download-links">
   <a class="uk-button uk-button-primary uk-button-small" 
     title="nifi-{{ $downloadVersion }}-source-release.zip" 
     href="{{ $primaryDownloadUrl }}/{{ $downloadFilePath }}">{{ .Get "label" }} {{ $downloadVersion }}</a>
diff --git a/layouts/shortcodes/download-links.html b/layouts/shortcodes/download-links.html
index 48230a7b9..5488db9d2 100644
--- a/layouts/shortcodes/download-links.html
+++ b/layouts/shortcodes/download-links.html
@@ -25,7 +25,7 @@
 
 {{- $downloadFilePath := (print $downloadVersion "/" $project "-" $qualifier $downloadVersion $extension) -}}
 
-<div class="uk-margin-top">
+<div class="uk-margin-top download-links">
   <a class="uk-button uk-button-primary uk-button-small" 
     title="nifi-{{ $downloadVersion }}-source-release.zip" 
     href="{{ $primaryDownloadUrl }}/{{ $downloadFilePath }}">{{ .Get "label" }} {{ $downloadVersion }}</a>
diff --git a/layouts/shortcodes/fds-download-links.html b/layouts/shortcodes/fds-download-links.html
index b5bab0404..21e23d1a4 100644
--- a/layouts/shortcodes/fds-download-links.html
+++ b/layouts/shortcodes/fds-download-links.html
@@ -13,7 +13,7 @@
 
 {{- $downloadFilePath := (print "nifi-fds/nifi-fds-" $downloadVersion "/nifi-fds-" $downloadVersion "-source-release.zip") -}}
 
-<div class="uk-margin-top">
+<div class="uk-margin-top download-links">
   <a class="uk-button uk-button-primary uk-button-small" 
     title="nifi-{{ $downloadVersion }}-source-release.zip" 
     href="{{ $primaryDownloadUrl }}/{{ $downloadFilePath }}">{{ .Get "label" }} {{ $downloadVersion }}</a>
diff --git a/themes/nifi/layouts/partials/header.html b/themes/nifi/layouts/partials/header.html
index 818eefd3e..68baf107d 100644
--- a/themes/nifi/layouts/partials/header.html
+++ b/themes/nifi/layouts/partials/header.html
@@ -9,11 +9,14 @@
             <img src="/images/apache-nifi-drop-logo.svg" alt="Apache NiFi Logo" class="navbar-logo" width="36" height="48" />
           </a>
         </li>
+        <li class="uk-hidden@s">
+          <a href="#" class="uk-navbar-toggle " uk-navbar-toggle-icon uk-toggle="target: #mobile-menu"></a>
+        </li>
 
 
           {{ $currentPage := . }}
           {{ range .Site.Menus.main }}
-          <li class="{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}uk-active{{ end }}">
+          <li class="uk-visible@s {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}uk-active{{ end }}">
             <a href="{{ .URL }}">{{ .Name }}</a>
             {{ if .HasChildren }}
             <ul class="uk-dropdown" uk-dropdown="mode: click; animation: uk-animation-slide-top-small; duration: 300;">
@@ -64,4 +67,46 @@
       </ul>
     </div>
   </nav>
+</div>
+
+
+<div id="mobile-menu" uk-offcanvas class="uk-offcanvas">
+  <div class="uk-offcanvas-bar">
+    <ul class="uk-navbar-nav" uk-accordion>
+      
+      {{ $currentPage := . }}
+        {{ range .Site.Menus.main }}
+        <li class="{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}uk-active{{ end }}">
+          <a {{ if not .HasChildren }}href="{{ .URL }}"{{ else }}class="uk-accordion-title" {{ end }}>{{ .Name }}</a>
+          {{ if .HasChildren }}
+          <ul class="uk-accordion-content">
+            {{ range .Children }}
+            <li class="{{ if $currentPage.IsMenuCurrent "main" . }}uk-active{{ end }}">
+              <a href="{{ .URL }}" {{ if eq .Params.external true }}target="_blank" rel="noopener noreferrer"{{ end }}>
+                {{ .Name }}
+                {{ if eq .Params.external true }}<span uk-icon="link"></span>{{ end }}
+              </a>
+
+            {{ if .HasChildren }}
+            <ul>
+              {{ range .Children }}
+              <li class="{{ if $currentPage.IsMenuCurrent "main" . }}uk-active{{ end }}">
+              <a href="{{ .URL }}" {{ if eq .Params.external true }}target="_blank" rel="noopener noreferrer"{{ end }}>
+                {{ .Name }}
+                {{ if eq .Params.external true }}<span uk-icon="link"></span>{{ end }}
+              </a>
+              </li>
+              {{ end }}
+            </ul>
+            {{ end }}
+
+            </li>
+            {{ end }}
+          </ul>
+          {{ end }}
+        </li>
+        {{ end }}
+
+    </ul>
+  </div>
 </div>
\ No newline at end of file
diff --git a/themes/nifi/static/css/main.css b/themes/nifi/static/css/main.css
index 7bf126b52..39870ba9c 100644
--- a/themes/nifi/static/css/main.css
+++ b/themes/nifi/static/css/main.css
@@ -10,6 +10,19 @@ footer {
   padding: 60px 0px 40px 0px;
 }
 
+table tr td,
+table tr th {
+  text-align: left;
+  padding: 12px 24px;
+}
+
+table tr td:first-child,
+table tr th:first-child {
+  padding-left: 0;
+}
+
+
+
 a {
   color: #004849;
 }
@@ -265,14 +278,81 @@ footer h3 {
   min-width: 300px;
 }
 
-.uk-tab>.uk-active>a {
-  border-color: #7a96a4;
+/* Mobile styling */
+@media (max-width: 640px) {
+  .downloads .uk-button-primary,
+  main .uk-button-primary {
+    min-width: 100%;
+  }
+  .download-links .uk-button + .uk-button {
+    margin-left: 0;
+  }
+
+  .download-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  .download-links .uk-button {
+    flex-grow: 2;
+  }
+
+  .hero {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
 }
 
-table tr td,
-table tr th {
-  min-width: 240px;
+/* Custom breakpoint for the main menu */
+@media (max-width: 814px) {
+  nav .uk-hidden\@s {
+    display: block!important;
+  }
+  nav .uk-visible\@s {
+    display: none!important;
+  }
+}
+
+
+.uk-offcanvas-bar {
+  width: 320px;
+  padding-top: 32px;
+}
+
+.uk-offcanvas .uk-navbar-nav {
+  flex-wrap: wrap;
+}
+
+.uk-offcanvas .uk-navbar-nav ul {
+  list-style: none;
+}
+
+.uk-offcanvas .uk-button {
+  width: 100%;
   text-align: left;
+  margin-bottom: 20px;;
+}
+
+.uk-offcanvas .uk-button:hover {
+  text-decoration: underline;
+}
+
+.uk-offcanvas .uk-navbar-nav > *,
+.uk-offcanvas .uk-navbar-nav > li > a {
+  width: 100%;
+  min-height: auto;
+  justify-content: left;
+  white-space: nowrap;
+}
+
+.uk-offcanvas .uk-accordion-content li + li {
+  margin-top: 12px;
+}
+
+
+.uk-tab>.uk-active>a {
+  border-color: #7a96a4;
 }
 
 .uk-card img {