diff --git a/app/themes/sidebar_dark/index.tpl b/app/themes/sidebar_dark/index.tpl
index 5da822f..b6fe189 100644
--- a/app/themes/sidebar_dark/index.tpl
+++ b/app/themes/sidebar_dark/index.tpl
@@ -14,6 +14,7 @@
 
     <link rel="stylesheet" href="app/css/n2web.css">
     <link rel="stylesheet" href="app/themes/{$theme}/theme.css">
+    <link rel="stylesheet" href="app/themes/{$theme}/theme_mobile.css">
 
     <script src="app/js/jquery-3.6.0.min.js"></script>
     <script src="app/themes/{$theme}/theme.js"></script>
@@ -24,12 +25,15 @@
         <div class="n2web_header_inner">
             <div class="n2web_header_main_logo">
                 <a href="/">
-                    <img src="{$main_logo_dark}" alt="">
+                    <img src="{$main_logo_light}" alt="">
                     <div class="n2web_header_main_title">
                         <h1>{$page_title}</h1>
                     </div>
                 </a>
             </div>
+            <div class="n2web_header_mobile_menu_button n2web_menu_item">
+                ☰
+            </div>
             <div class="n2web_header_menu menu_left">
                 {foreach from=$menu_left item=link key=caption}
                     <a href="{$link}">
diff --git a/app/themes/sidebar_dark/theme.js b/app/themes/sidebar_dark/theme.js
index 253b525..f9cdd78 100644
--- a/app/themes/sidebar_dark/theme.js
+++ b/app/themes/sidebar_dark/theme.js
@@ -37,6 +37,16 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
+    $(".n2web_header_mobile_menu_button").click(function (){
+        var element =   $(".n2web_header_menu.menu_right");
+        if($(element).hasClass('opened')){
+            $(element).removeClass('opened');
+            $(element).removeClass('opened');
+        }else{
+            $(element).addClass('opened');
+            $(element).addClass('opened');
+        }
+    })
 
 });
 
diff --git a/app/themes/sidebar_dark/theme_mobile.css b/app/themes/sidebar_dark/theme_mobile.css
new file mode 100644
index 0000000..66a4126
--- /dev/null
+++ b/app/themes/sidebar_dark/theme_mobile.css
@@ -0,0 +1,66 @@
+@media screen and (max-width:1024px) {
+    .n2web_structure{
+        width: 100%;
+    }
+    .n2web_header_inner{
+        width: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    .n2web_content_inner{
+        padding-right: 15px;
+    }
+}
+
+@media screen and (max-width:425px) {
+    .n2web_content_inner {
+        width: 100%;
+        margin: 0;
+        padding: 15px;
+    }
+    .n2web_sidebar {
+        width: 100%;
+        height: auto;
+        border-right: 1px solid #eeedeb;
+        position: initial;
+        z-index: 5;
+    }
+    .n2web_documenttree {
+        box-shadow: 0px 2px 2px #00000038;
+    }
+    .n2web_header {
+        box-shadow: 0px 3px 4px #00000038;
+    }
+    .n2web_header_inner{
+        border: none;
+    }
+    .n2web_breadcrumbs{
+        display: none;
+    }
+    .n2web_searchResults{
+        margin-top: 0;
+    }
+    .n2web_header_menu.menu_right {
+        background: #fff;
+        box-shadow: 0px 3px 5px #00000038;
+        border-radius: 5px;
+        top: 45px;
+        position: absolute;
+        right: 15px;
+        display: none;
+    }
+    .n2web_header_menu.menu_right.opened{
+        display: block;
+    }
+    .menu_right .n2web_menu_item {
+        float: none;
+    }
+    .n2web_header_menu a{
+        text-decoration: none;
+    }
+    .n2web_header_mobile_menu_button {
+        float: right;
+        font-size: 24px;
+        padding: 0px 8px;
+    }
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_dark_full_width/index.tpl b/app/themes/sidebar_dark_full_width/index.tpl
index ab38934..b6fe189 100644
--- a/app/themes/sidebar_dark_full_width/index.tpl
+++ b/app/themes/sidebar_dark_full_width/index.tpl
@@ -14,6 +14,7 @@
 
     <link rel="stylesheet" href="app/css/n2web.css">
     <link rel="stylesheet" href="app/themes/{$theme}/theme.css">
+    <link rel="stylesheet" href="app/themes/{$theme}/theme_mobile.css">
 
     <script src="app/js/jquery-3.6.0.min.js"></script>
     <script src="app/themes/{$theme}/theme.js"></script>
@@ -30,6 +31,9 @@
                     </div>
                 </a>
             </div>
+            <div class="n2web_header_mobile_menu_button n2web_menu_item">
+                ☰
+            </div>
             <div class="n2web_header_menu menu_left">
                 {foreach from=$menu_left item=link key=caption}
                     <a href="{$link}">
diff --git a/app/themes/sidebar_dark_full_width/theme.js b/app/themes/sidebar_dark_full_width/theme.js
index 253b525..f9cdd78 100644
--- a/app/themes/sidebar_dark_full_width/theme.js
+++ b/app/themes/sidebar_dark_full_width/theme.js
@@ -37,6 +37,16 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
+    $(".n2web_header_mobile_menu_button").click(function (){
+        var element =   $(".n2web_header_menu.menu_right");
+        if($(element).hasClass('opened')){
+            $(element).removeClass('opened');
+            $(element).removeClass('opened');
+        }else{
+            $(element).addClass('opened');
+            $(element).addClass('opened');
+        }
+    })
 
 });
 
diff --git a/app/themes/sidebar_dark_full_width/theme_mobile.css b/app/themes/sidebar_dark_full_width/theme_mobile.css
new file mode 100644
index 0000000..66a4126
--- /dev/null
+++ b/app/themes/sidebar_dark_full_width/theme_mobile.css
@@ -0,0 +1,66 @@
+@media screen and (max-width:1024px) {
+    .n2web_structure{
+        width: 100%;
+    }
+    .n2web_header_inner{
+        width: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    .n2web_content_inner{
+        padding-right: 15px;
+    }
+}
+
+@media screen and (max-width:425px) {
+    .n2web_content_inner {
+        width: 100%;
+        margin: 0;
+        padding: 15px;
+    }
+    .n2web_sidebar {
+        width: 100%;
+        height: auto;
+        border-right: 1px solid #eeedeb;
+        position: initial;
+        z-index: 5;
+    }
+    .n2web_documenttree {
+        box-shadow: 0px 2px 2px #00000038;
+    }
+    .n2web_header {
+        box-shadow: 0px 3px 4px #00000038;
+    }
+    .n2web_header_inner{
+        border: none;
+    }
+    .n2web_breadcrumbs{
+        display: none;
+    }
+    .n2web_searchResults{
+        margin-top: 0;
+    }
+    .n2web_header_menu.menu_right {
+        background: #fff;
+        box-shadow: 0px 3px 5px #00000038;
+        border-radius: 5px;
+        top: 45px;
+        position: absolute;
+        right: 15px;
+        display: none;
+    }
+    .n2web_header_menu.menu_right.opened{
+        display: block;
+    }
+    .menu_right .n2web_menu_item {
+        float: none;
+    }
+    .n2web_header_menu a{
+        text-decoration: none;
+    }
+    .n2web_header_mobile_menu_button {
+        float: right;
+        font-size: 24px;
+        padding: 0px 8px;
+    }
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_light/index.tpl b/app/themes/sidebar_light/index.tpl
index ab38934..b6fe189 100644
--- a/app/themes/sidebar_light/index.tpl
+++ b/app/themes/sidebar_light/index.tpl
@@ -14,6 +14,7 @@
 
     <link rel="stylesheet" href="app/css/n2web.css">
     <link rel="stylesheet" href="app/themes/{$theme}/theme.css">
+    <link rel="stylesheet" href="app/themes/{$theme}/theme_mobile.css">
 
     <script src="app/js/jquery-3.6.0.min.js"></script>
     <script src="app/themes/{$theme}/theme.js"></script>
@@ -30,6 +31,9 @@
                     </div>
                 </a>
             </div>
+            <div class="n2web_header_mobile_menu_button n2web_menu_item">
+                ☰
+            </div>
             <div class="n2web_header_menu menu_left">
                 {foreach from=$menu_left item=link key=caption}
                     <a href="{$link}">
diff --git a/app/themes/sidebar_light/theme.js b/app/themes/sidebar_light/theme.js
index 253b525..f9cdd78 100644
--- a/app/themes/sidebar_light/theme.js
+++ b/app/themes/sidebar_light/theme.js
@@ -37,6 +37,16 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
+    $(".n2web_header_mobile_menu_button").click(function (){
+        var element =   $(".n2web_header_menu.menu_right");
+        if($(element).hasClass('opened')){
+            $(element).removeClass('opened');
+            $(element).removeClass('opened');
+        }else{
+            $(element).addClass('opened');
+            $(element).addClass('opened');
+        }
+    })
 
 });
 
diff --git a/app/themes/sidebar_light/theme_mobile.css b/app/themes/sidebar_light/theme_mobile.css
new file mode 100644
index 0000000..66a4126
--- /dev/null
+++ b/app/themes/sidebar_light/theme_mobile.css
@@ -0,0 +1,66 @@
+@media screen and (max-width:1024px) {
+    .n2web_structure{
+        width: 100%;
+    }
+    .n2web_header_inner{
+        width: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    .n2web_content_inner{
+        padding-right: 15px;
+    }
+}
+
+@media screen and (max-width:425px) {
+    .n2web_content_inner {
+        width: 100%;
+        margin: 0;
+        padding: 15px;
+    }
+    .n2web_sidebar {
+        width: 100%;
+        height: auto;
+        border-right: 1px solid #eeedeb;
+        position: initial;
+        z-index: 5;
+    }
+    .n2web_documenttree {
+        box-shadow: 0px 2px 2px #00000038;
+    }
+    .n2web_header {
+        box-shadow: 0px 3px 4px #00000038;
+    }
+    .n2web_header_inner{
+        border: none;
+    }
+    .n2web_breadcrumbs{
+        display: none;
+    }
+    .n2web_searchResults{
+        margin-top: 0;
+    }
+    .n2web_header_menu.menu_right {
+        background: #fff;
+        box-shadow: 0px 3px 5px #00000038;
+        border-radius: 5px;
+        top: 45px;
+        position: absolute;
+        right: 15px;
+        display: none;
+    }
+    .n2web_header_menu.menu_right.opened{
+        display: block;
+    }
+    .menu_right .n2web_menu_item {
+        float: none;
+    }
+    .n2web_header_menu a{
+        text-decoration: none;
+    }
+    .n2web_header_mobile_menu_button {
+        float: right;
+        font-size: 24px;
+        padding: 0px 8px;
+    }
+}
\ No newline at end of file
diff --git a/app/themes/sidebar_light_full_width/index.tpl b/app/themes/sidebar_light_full_width/index.tpl
index ab38934..b6fe189 100644
--- a/app/themes/sidebar_light_full_width/index.tpl
+++ b/app/themes/sidebar_light_full_width/index.tpl
@@ -14,6 +14,7 @@
 
     <link rel="stylesheet" href="app/css/n2web.css">
     <link rel="stylesheet" href="app/themes/{$theme}/theme.css">
+    <link rel="stylesheet" href="app/themes/{$theme}/theme_mobile.css">
 
     <script src="app/js/jquery-3.6.0.min.js"></script>
     <script src="app/themes/{$theme}/theme.js"></script>
@@ -30,6 +31,9 @@
                     </div>
                 </a>
             </div>
+            <div class="n2web_header_mobile_menu_button n2web_menu_item">
+                ☰
+            </div>
             <div class="n2web_header_menu menu_left">
                 {foreach from=$menu_left item=link key=caption}
                     <a href="{$link}">
diff --git a/app/themes/sidebar_light_full_width/theme.js b/app/themes/sidebar_light_full_width/theme.js
index 253b525..f9cdd78 100644
--- a/app/themes/sidebar_light_full_width/theme.js
+++ b/app/themes/sidebar_light_full_width/theme.js
@@ -37,6 +37,16 @@ $(document).ready(function () {
         let element = $(n2webid);
         highlightJumpMark(element);
     });
+    $(".n2web_header_mobile_menu_button").click(function (){
+        var element =   $(".n2web_header_menu.menu_right");
+        if($(element).hasClass('opened')){
+            $(element).removeClass('opened');
+            $(element).removeClass('opened');
+        }else{
+            $(element).addClass('opened');
+            $(element).addClass('opened');
+        }
+    })
 
 });
 
diff --git a/app/themes/sidebar_light_full_width/theme_mobile.css b/app/themes/sidebar_light_full_width/theme_mobile.css
new file mode 100644
index 0000000..66a4126
--- /dev/null
+++ b/app/themes/sidebar_light_full_width/theme_mobile.css
@@ -0,0 +1,66 @@
+@media screen and (max-width:1024px) {
+    .n2web_structure{
+        width: 100%;
+    }
+    .n2web_header_inner{
+        width: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+    .n2web_content_inner{
+        padding-right: 15px;
+    }
+}
+
+@media screen and (max-width:425px) {
+    .n2web_content_inner {
+        width: 100%;
+        margin: 0;
+        padding: 15px;
+    }
+    .n2web_sidebar {
+        width: 100%;
+        height: auto;
+        border-right: 1px solid #eeedeb;
+        position: initial;
+        z-index: 5;
+    }
+    .n2web_documenttree {
+        box-shadow: 0px 2px 2px #00000038;
+    }
+    .n2web_header {
+        box-shadow: 0px 3px 4px #00000038;
+    }
+    .n2web_header_inner{
+        border: none;
+    }
+    .n2web_breadcrumbs{
+        display: none;
+    }
+    .n2web_searchResults{
+        margin-top: 0;
+    }
+    .n2web_header_menu.menu_right {
+        background: #fff;
+        box-shadow: 0px 3px 5px #00000038;
+        border-radius: 5px;
+        top: 45px;
+        position: absolute;
+        right: 15px;
+        display: none;
+    }
+    .n2web_header_menu.menu_right.opened{
+        display: block;
+    }
+    .menu_right .n2web_menu_item {
+        float: none;
+    }
+    .n2web_header_menu a{
+        text-decoration: none;
+    }
+    .n2web_header_mobile_menu_button {
+        float: right;
+        font-size: 24px;
+        padding: 0px 8px;
+    }
+}
\ No newline at end of file